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;         }    }