LocalStorage

在看LocalStorage的时候发现了一件神奇的事情

 

IE8居然已经就支持了..

 

操作很简单就4个

 1 <script type="text/javascript">
 2     localStorage.setItem("test", "测试中");
 3     alert(localStorage.getItem("test"));
 4 
 5     localStorage.setItem("test1", "测试1");
 6     alert(localStorage.getItem("test1"));
 7 
 8     localStorage.setItem("test", "测试中1"); //修改test
 9     alert(localStorage.getItem("test"));
10 
11     localStorage.removeItem("test1");
12     alert(localStorage.getItem("test1")); //返回null
13 
14     localStorage.clear();
15     alert(localStorage.getItem("test")); //返回null
16 </script>

 

既然是键值对. 得到key的方法自然也必须有

1     for (var i = 0; i < localStorage.length; i++)
2     {
3         alert(localStorage.key(i));
4         alert(localStorage.getItem(localStorage.key(i)));
5     }

 

localStorage提供了方法监听localStorage，当其他页面改变localStorage的时候(IE当前页面也可以),触发事件

  var Storage = {
        _storage: null,
        _errorText : null,
        _enum: {
            Success: 0,
            Browser: 1,
            OtherError : 99
        },

        /* 
            得到localStorage
            @static
            @return {window.localStorage}
        */
        _getStorage: function () {
            if (this._storage) return this._storage;
            if (!!window.localStorage) {
                this._storage = window.localStorage;
            }
            else {
                this._errorText = this._enum.Browser;
            }

            return this._storage;
        },

        /*
            是否可用
            @static
            @return {Bool}
        */
        isAvailable: function () {
            return !!(this._getStorage());
        },

        /*
            得到错误码
            @return {string}
        */
        getErrorCode:function() {
            return this._errorText;
        },

        /**
            写入数据
            @static
            @param {string} key 
            @param {string} val 
            @return {bool}
        */
        setItem: function (key, val) {
            var st = this._getStorage();
            return st && st.setItem(key, val);
        },

        /*
            读取数据
            @static
            @param {string} key 
            @return {bool}
        */
        getItem: function (key) {
            var st = this._getStorage();
            return st && st.getItem(key);
        },

        /*
            删除数据
            @static
            @param {string} key 
            @return {bool}
        */
        removeItem: function (key) {
            var st = this._getStorage();
            return st && st.removeItem(key);
        },

        /**
            清空
            @static
            @return {bool}
        */
        clear: function () {
            var st = this._getStorage();
            return st && st.clear();
        },

        /*
        监听某个key的变化
        @param {string} key 需要监听的key
        @param {string} callback 当数据发生变化时的回调（回调中传入的参数为当前key对应的值）
        @return {bool}
        */
        onstorage: function (key, callback) {
            var st = this._getStorage();

            if (document.attachEvent && !K.Browser.opera) {
                document.attachEvent("onstorage", this._onstorage(key, callback,st));
            }
                //其他注册在window上
            else {
                window.addEventListener("storage", this._onstorage(key, callback,st), false);
            };
        },

        _onstorage: function (key, callback,st) {
            var oldValue = st[key];

            /*
                会执行3次 所以需要判断是否和oldValue一致
            */
            return function (e) {
                setTimeout(function () {
                    if (key == e.key && oldValue != e.newValue) {
                        alert("key:" + e.key + ", newValue:" + e.newValue + ",oldValue : " + oldValue + ", Url:" + window.location.href);
                        oldValue = e.newValue;
                    }
                    
                }, 0);
            };
        }
    }

webIM 就不用那么苦逼的 一次又一次的去轮训了.

 

SessionStorage 用法差不多,不过是在浏览器关闭时会销毁。

 

本地存储这东西并不安全, 就opera 有过简单加密,其他的都是明文的.

很容易遭受xxs攻击,如果是你对你们过滤没信心的话..

 

不要存储敏感信息.

 

转载于:https://www.cnblogs.com/CallMeTommy/archive/2013/02/28/2921239.html