Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能,可以用于客户端的本地存储,其相对于cookie来说有以下几点优势:

  • 存储空间大:cookie只有4KB的存储空间,而Web Storage在官方建议中为每个网站5M。
  • 可选择性强:Web Storage分为两种:

    1. localStorage - 没有时间限制的数据存储
    2. sessionStorage - 针对一个 session 的数据存储

之前,这些都是由cookie完成的。但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据(同源策略)。HTML5 使用 JavaScript 来存储和访问数据。

HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除。

首先检测浏览器是否支持本地存储。

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

localStorage提供了几个方法:

1、存储:

  • localStorage.setItem(key,value);
  • localStorage.a = 3;//设置a为”3”
  • localStorage[“a”] = “sfsf”;//设置a为”sfsf”,覆盖上面的值
  • 如果key存在时,更新value
  • 备注:localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M。

2、获取:

  • var a1 = localStorage.getItem(a)
  • var a2 = localStorage[“a”];//获取a的值
  • var a3 = localStorage.a;//获取a的值
  • 如果key不存在返回null

需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换:parseInt()
另外,在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()就ok了。

3、删除:

  • localStorage.removeItem(key)
  • 一旦删除,key对应的数据将会全部删除

4、全部清除:

  • localStorage.clear()
  • 清除所有localStorage对象保存的数据

5、遍历localStorage存储的key

  • .length 数据总量,例:localStorage.length
    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)) + " ");
    }
    }
    

6、存储JSON格式数据

  • JSON.stringify(data) // 将一个对象转换成JSON格式的数据串,返回转换后的数据串
  • JSON.parse(data) //将数据解析成对象,返回解析后的对象

7、storage事件,可以对键值对的改变进行监听

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 if(!e){e=window.event;}
 //showStorage();
}

对于事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察键值对的变化,如下表:

Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change

测试发现,目前浏览器对这个支持不太好,仅iPad和Firefox支持,而且Firefox支持得乱糟糟,e对象根本没有那些属性。iPad支持非常好,用的是e.uri(不是e.url),台式机上的Safari不行,诡异。

8、sessionStorage

  • 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。