html5之web存储

HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,这里以localStorage为例。

1.localStorage(永久存储) 2.sessionStorage(临时存储);

这里写个简称方便书写1.localStorage = le 2.sessionStorage = se ;

两种存储的方法完全相同,不一样的地方在于1.le存储后是一直存在本地的,不会被浏览器删除的,没有时间限制。2.se存储是伴随着session,窗口一旦关闭就没了,它存储的时间和用户访问网站的时间一样(当用户关闭网页时数据也随之删除)。

storage方法

var localStorage = window.localStorage;

存储值

localStorage.name = "kobi";//设置name为"kobi"
localStorage["name"] = "koko";//设置name为"koko",覆盖上面的值
localStorage.setItem("age","18");//设置age为"18"

获取值
var a = localStorage["name"];//获取name的值
var c = localStorage.age;//获取age的值
var b = localStorage.getItem("name");//获取name的值

删除值
localStorage.removeItem("c");//清除c的值

删除所有值

localStorage.clear(); 清除所有的值

HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键,再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。

 

posted on 2016-11-10 13:25  我艾狼  阅读(89)  评论(0)    收藏  举报