html5 web storage

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

localStorage 同一domain是共享的（多个窗口共享一个“数据库”）

验证是否支持localStorage：

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

length：本地存储数据的个数
setItem(key,value)：将value存储到key字段
getItem(key)：获取指定key本地存储的值
removeItem(key)：移除指定key本地存储的值
clear()：清空该域下的所有数据
key(i)：获取第i个数据的key

 

存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法，以键值对的方式存在的：

    localStorage.a = "this is a"
    localStorage["a"] = "this is change_a"
    localStorage.setItem("b", "this is b")
    localStorage.setItem("b", "this is change_b")
    var a1 = localStorage.getItem("a")
    var a2 = localStorage.getItem("b")

    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>");
        }
    }
    showStorage()

 

localstorage  JSON.stringify 存储json

 

 var obj = [
        {name:"kitty", age:21},
        {name:"sonny", age:13},
        {name:"kitty", age:16}
    ];
    var obj = JSON.stringify(obj);
    localStorage.setItem("item", obj);
    var k = localStorage.getItem("item")

    kk = JSON.parse(k)
    function pri() {
        var htm = "<ul>"
        for (var i in kk) {
            htm += "<li>"
            for (var s in kk[i]) {
                htm += "<span>" + kk[i][s] + "    " + "</span>"
            }
            htm += "</li>"
        }
        htm += "</ul>"
        return htm;
    }
    htm = pri()
    document.write(htm);

 

 html5监听事件，追踪存储区域中数据的变化。