html5中Localstorage本地存储的例子

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

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

 Localstorage本地存储基本用法

如何创建和访问 localStorage

上面就创建了一个localStorage。

我们再来做一个刷新页面，增加访问次数的功能！很简单，代码如下：

上面是用点的方式进行操作，localStorage还有存储API,具体如下：

调用setItem()方法，将对应的名字和值传递出去，可以实现数据存储

调用getItem()方法，将名字传递出去，可以获取对应的值

调用removeItem()方法，名称作为参数，可以删除对应的数据

调用clear()方法，可以删除所有存储的数据

使用length属性以及key()方法，传入0~length-1的数字，可以枚举所有存储数据的名字

用法如下：

localStorage.setItem("name", "haorooms");    // 以"name"为名字存储一个字符串
localStorage.getItem("name");            // 获取"name"的值

// 枚举所有存储的名字/值对
for(var i=0; i     var name = localStorage.key(i);            // 获取第i对的名字
    var value = localStorage.getItem(name);        // 获取该对的值
}

localStorage.removeItem("name");        // 删除"name"项
localAStorage.clear();                // 全部删除
sessionStorage和Localstorage区别

sessionStorage用法和Localstorage用法一样，区别就是，sessionStorage是会话存储，关闭浏览器，存储内容就会被清除。

低版本浏览器存储兼容方案

IE User Data

微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制——“userData”。

userData可以实现一定量的字符串数据存储，对于IE8以前的IE浏览器中，可以将其用作是Web存储的替代方案。

iLocalStorage插件

由于IE8以下浏览器的本地存储API不一样，所以就写了个插件兼容各大浏览器存储。提供的方法及用法如下：

getItem: 获取属性
setItem: 设置属性
removeItem: 删除属性

iLocalStorage.setItem('key', 'value');
console.log(iLocalStorage.getItem('key'));
iLocalStorage.removeItem('key');
插件代码

/**
 * LocalStorage 本地存储兼容函数
 * getItem: 获取属性
 * setItem: 设置属性
 * removeItem: 删除属性
 *
 *
 * @example
 *
    iLocalStorage.setItem('key', 'value');
    console.log(iLocalStorage.getItem('key'));
    iLocalStorage.removeItem('key');
 *
 */

(function(window, document){

    // 1. IE7下的UserData对象
    var UserData = {
        userData: null,
        name: location.href,
        init: function(){
            // IE7下的初始化
            if(!UserData.userData){
                try{
                    UserData.userData = document.createElement("INPUT");
                    UserData.userData.type = "hidden";
                    UserData.userData.style.display = "none";
                    UserData.userData.addBehavior("#default#userData");
                    document.body.appendChild(UserData.userData);
                    var expires = new Date();
                    expires.setDate(expires.getDate() + 365);
                    UserData.userData.expires = expires.toUTCString();
                } catch(e){
                    return false;
                }
            }
            return true;
        },

        setItem: function(key, value){
            if(UserData.init()){
                UserData.userData.load(UserData.name);
                UserData.userData.setAttribute(key, value);
                UserData.userData.save(UserData.name);
            }
        },

        getItem: function(key){
            if(UserData.init()){
                UserData.userData.load(UserData.name);
                return UserData.userData.getAttribute(key);
            }
        },

        removeItem: function(key){
            if(UserData.init()){
                UserData.userData.load(UserData.name);
                UserData.userData.removeAttribute(key);
                UserData.userData.save(UserData.name);
            }
        }

    };

    // 2. 兼容只支持globalStorage的浏览器
    // 使用： var storage = getLocalStorage();
    function getLocalStorage(){
        if(typeof localStorage == "object"){
            return localStorage;
        } else if(typeof globalStorage == "object"){
            return globalStorage[location.href];
        } else if(typeof userData == "object"){
            return globalStorage[location.href];
        } else{
            throw new Error("不支持本地存储");
        }
    }
    var storage = getLocalStorage();

    function iLocalStorage(){

    }

    // 高级浏览器的LocalStorage对象
    iLocalStorage.prototype = {
        setItem: function(key, value){
            if(!window.localStorage){
                UserData.setItem(key, value);
            }else{
                storage.setItem(key, value);
            }
        },

        getItem: function(key){
            if(!window.localStorage){
                return UserData.getItem(key);
            }else{
                return storage.getItem(key);
            }
        },

        removeItem: function(key){
            if(!window.localStorage){
                UserData.removeItem(key);
            }else{
                storage.removeItem(key);
            }
        }
    }

    if (typeof module == 'object') {
        module.exports = new iLocalStorage();
    }else {
        window.iLocalStorage = new iLocalStorage();
    }

})(window, document);

以上就是用户操作行为本地存储的例子了

测试发现，目前浏览器对这个支持不太好，仅iPad和Firefox支持，而且Firefox支持得乱糟糟，e对象根本没有那些属性。iPad支持非常好，用的是e.uri（不是e.url），台式机上的Safari不行，诡异，估计越后面浏览器版本越高可能就会支持的更好了。