localStorage详解

LocalStarage详解

1. 基本介绍

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

2. API

  localStorage可以看成为一个特殊的Array，允许通过localStarage["a"]和localStarage.a的形式保存本地数据，但是保存的值却有一个限制——只能为字符串，因此，当保存Object对象时，我们可以使用JSON.stringify将Object转化为字符串。

* 属性

  length 长度，指示localStorage的长度。

* 方法

  key(index) 获取指定位置的key值，index从0开始；

  setItem(key, value) 新建或替换现有的值；

  getItem(key) 获取指定key的值；

  removeItem(key) 一出指定key的项；

  clear() 清除所有值。

3. 局限性

  由于 HTML5本地存储标准也有它自身的局限，简单来说就是这几个关键词，“5M容量"和 “QUOTA_EXCEEDED_ERR“ 。
  “5M 容量",是每个来源（origin)（http://www.whatwg.org/specs/web-apps/current-work /multipage/origin-0.html#origin-0）允许存储容量的默认限制。在HTML5 存储标准中，5M只不过是作为一个建议的数值出现的，但是这个建议被所有的浏览器所采用。挺奇怪的，不是吗？　　需要注意的是，存储的数据都是以字符串形 式保存的。因此如果你存储了大量整型数或浮点数，这些数也会以字符串形式保存。浮点数的每一位都需要一个字符来表示。 这大大增加了所需要的存储空间。
  “QUOTA_EXCEEDED_ERR” 是一个异常，如果你使用的存储容量超过了5M，你就会碰到它。
4. 代码实例

   

   _dao.prototype.save=function(obj, key){ 
        var id = key || (+ new Date()); 
        var str=JSON.stringify(obj); 
        if(this.storage){ 
            this.storage.setItem("" + id, str); 
        } 
        else{ 
            throw new Error("不支持本地存储！"); 
        } 
        return id; 
    } 
    _dao.prototype.delete=function(id){ 
        if(this.storage){ 
            this.storage.removeItem(id); 
        } 
        else{ 
            throw new Error("不支持本地存储！"); 
        } 
        return id; 
    } 
    _dao.prototype.list=function(){ 
        var array={}; 
        if(this.storage){ 
            for(var key in this.storage){ 
                var value = this.storage.getItem(key); 
                array[key]=value; 
            } 
        } 
        else{ 
            return array; 
        }
    }