LocalStorage本地存储

标签：style   blog   class   code   java   color   

　　LocalStorage,即"Web存储"，某些浏览器供应商也叫"本地存储"、"DOM存储",原本作为HTML5标准的一部分，后来因为某些原因被抽离出来作为单独的WEB应用标准。localStorage提供了一种方式，让Web页面在客户端浏览器中以键值对的形式存储本地字符串数据，无论是用户是离开该站点，刷新，关闭浏览器还是其他操作，存储的数据依然存在。

一、localStorage与cookie

　　localStorage与cookie一样，都是在客户端浏览器下存储数据，但是又有不同：

　　1、cookie是document的属性，值类型为string,localStorage是window的属性，值类型为object;

　　2、cookie会随着每一次HTTP请求附带发送，无论服务器端是否需要，而且未加密(基于SSL的站点除外)；localStorage不会，除非手动将其发送到远程服务器，否则只单纯存储在客户端本地；

　　3、cookie最大为4Kb，localStorage在每个域下最大为5Mb;

　　4、就支持性而言，主流浏览器如IE6+,chrome，Firefox都支持cookie，但是低版本的IE如IE67不支持localStorage。

二、localStorage操作

　　IE对localStorage的操作需要在非本地环境(非file://...)下进行才能看到效果。

　　1、判断浏览器支持性

    function suportStorage(){
        return "localStorage" in window && window["localStorage"] !== null; 
    }

    if(suportStorage()){
        // 浏览器内置支持localstorage
        // to do..
    }else{
        // 没有本地HTML5存储支持
        // 尝试第三方方案,如dojox.storage
    }

　　2、localStorage的属性和方法

　　1)获取 getItem(key) 或 localStorage[key]　　

    // 获取
    var name = localStorage["name"];
    var name = localStorage.getItem("name");

 　　2)修改 setItem(key, value) 或者 localStorage[key] = value

    // 修改
    localStorage["name"] = "xx";      
    localStorage.setItem("name", "xx");

　　3)删除指定的key, removeItem(key)

    // 删除
    localStorage.removeItem("name");

　　4)删除所有key

    // 清空
    localStorage.clear();

　　5) length 用来获取存储区所有数据的个数

var len = localStorage.length;

 　　6) key 用来获取localStorage指定索引值的key

    localStorage["name"] = 1;
    localStorage["name2"] = 3;
    localStorage.key(0) // 输出 name

　　注意：localStorage对象在操作setItem的属性的顺序并不一定是实际存储在localStorage上的索引顺序，localStorage在setItem执行完后，标准浏览器如Chrome,Firefox等以及高版本的IE9+会在内部按照key的unicode进行一次排序，但是IE678则只是按照属性定义的顺序输出，不对key进行排序，如：　　

    localStorage["name"] = 1;
    localStorage["1"] = 2;
    localStorage["name2"] = 3;
    localStorage.key(0); // Chrome/Firefox/Safari/IE9+输出的是1，IE678输出name

三、localStorage事件

　　localStorage提供了监听localStorage实际发生变化的事件storage，任何时候只要setItem(), getItem(), clear(), removeItem()方法被调用，且实际改动了数据时，都会在window对象上触发storage事件。　　

    if(window.addEventListener){
        window.addEventListener("storage", handle, false);
    }else{
        window.attachEvent("onstorage", handle)
    }

LocalStorage本地存储,布布扣,bubuko.com

LocalStorage本地存储

标签：style   blog   class   code   java   color   

原文地址：http://www.cnblogs.com/mr189/p/3704735.html