Der's Blog

localStorage顾名思义，就是本地存储的意思，在以前很长一段时间，要想在客户端存储一些配置及登录信息等数据都只能通过COOKIE或flash的方式，如今html5来临，也带来了更强大的本地存储，最多可存储大小5M的字符串，足可以满足大部分的web应用，比cookie的4K要大出不少，还有一个sessionStorage，功能基本与localStorage相同，看名字便知与sesstion一样，关闭浏览器即失效。

以前有用过cookie的都了解cookie的存储读取方式都不太优雅，需要自己封装set get方法，而localStorage则方便许多，localStorage 是作為window的一个属性存在的，拥有setItem,getItem,removeItem,clear等方法，相当方便。

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，支持情况如下图：

如下代码即可判断浏览器是否支持

if(window.localStorage){
    alert("浏览支持localStorage")
}else{
   alert("浏览暂不支持localStorage")
}

localStorage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点操作符，及[]的方式进行数据存储，像如下的例子

var storage = window.localStorage;
storage.a = "haha";
storage["b"] = "hehe";
var a = storage.a;
var b = storage["b"];

另外，localStorage还提供了一个key()方法，配合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)) + "<br>");
 }
}

FF里storage.key(i) == storage[i], 算个BUG吧

HTML5的本地存储，还提供了一个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

写一个最简单的，利用本地存储的计数器，有一个需要注意的地方是不管setItem里传什么类型，最终都会被转成string，所以getItem的时候需要转类型：