localStorge本地存儲-更新中....

LocalStorge文檔查看

在H5中，由於提供了相應的web客戶端存儲數據的方法，所以不用利用傳統的追蹤cookie的方法，實現更加高效，簡單。

   HTML5中兩種web存儲的方法：

   localStorge-提供沒有時間限制的web存儲，每次訪問網頁都會被記錄存儲

   sessionStorage-針對一個session的web存儲，只記錄當前session的訪問記錄，關閉網頁即恢復

   利用localStorage可以做一個網站訪問量統計

<script>

        if (localStorage.pagecount){
               localStorage.pagecount=Number(localStorage.pagecount)+1;
           }
           else{
              localStorage.pagecount=1;
           }
           document.getElementById("result1").innerHTML=localStorage.pagecount;

        </script>

localStorage 方法存儲的數據沒有時間限制。第二天、第二週或下一年之後，數據依然可用。
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。
key 和 value 都必須爲字符串，換言之，web Storage的API只能操作字符串。

   if(window.localStorage){
   //或者 window.sessionStorage       
        alert("瀏覽支持localStorage")     
    }else{        
        alert("瀏覽暫不支持localStorage")     
    }
     //或者     
    if(typeof window.localStorage == 'undefined') {
    //或者 window.sessionStorage     
        alert("瀏覽暫不支持localStorage")     
    }    

1、 保存數據：localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
2、 讀取數據：localStorage.getItem( key ); sessionStorage.getItem( key );
3、 刪除單個數據：localStorage.removeItem( key ); sessionStorage.removeItem( key );
4、 刪除所有數據：localStorage.clear( ); sessionStorage.clear( );
5、 得到某個索引的key：localStorage.key( index ); sessionStorage.key( index );

聊天記錄，使用本地存儲的案例：

    //存儲聊天記錄;  
    function storageMsg(userid,tempObj){  
        // 如果第一次訪問數據，本地沒有緩存  
        if(window.localStorage[userid] == null ||window.localStorage[userid] == undefined){  
            var tempArr = [];  
            tempArr.push(tempObj);  
            var objStr = JSON.stringify(tempArr);  
            window.localStorage.setItem(userid,objStr);  
        }else{  
            var arrayObj = JSON.parse(window.localStorage.getItem(userid));  
            arrayObj.push(tempObj);  
            window.localStorage.setItem(userid,JSON.stringify(arrayObj));  
        }  

        // 緩存用戶聊天記錄  
        storageChatUserList(userid,tempObj);  
    }  

存儲在localStorage的聊天記錄格式

[
        "96298": {  
            "content": "1111",   
            "touxiang": "http://tp.i4ww.com/uploads/touxiang/14819000766806548.jpeg",   
            "nowTime": "1-6 0:39",   
            "name": "你好"  
        },  
        "90000": {  
            "content": "dsfadsaf",   
            "touxiang": "http://tp.i4ww.com/uploads/touxiang/14819000766806548.jpeg",   
            "nowTime": "1-6 0:39",   
            "name": "你好"  
        }  
    ]

 //存儲聊天的人員列表;  
    function storageChatUserList(userid,tempObj){  
        var userInfo = JSON.parse(window.localStorage.getItem(userid+"_userInfo"));  
        // 緩存聊天用戶記錄,如果本地沒有緩存過  
        if(window.localStorage["chatUserList"] == null ||window.localStorage["chatUserList"] == undefined){  
            var tempObj = {};  
            tempObj[userid] = {  
                "content" : tempObj.content,  
                "touxiang" : tempObj.touxiang,  
                "nowTime" : tempObj.nowTime,  
                "name" : userInfo.realname  
            };  
            var tempObjStr = JSON.stringify(tempObj);  
            window.localStorage.setItem("chatUserList",tempObjStr);  
        }  
        // 如果本地緩存中有了數據  
        else{  
            var chatUserListObj = JSON.parse(window.localStorage.getItem("chatUserList"));  
            // 如果已經有了緩存  
            chatUserListObj[userid] = {  
                "content" : tempObj.content,  
                "touxiang" : tempObj.touxiang,  
                "nowTime" : tempObj.nowTime,  
                "name" : userInfo.realname  
            };  
            var chatUserListObjStr = JSON.stringify(chatUserListObj);  
            window.localStorage.setItem("chatUserList",chatUserListObjStr);  
        }  

        console.log(window.localStorage.getItem("chatUserList"));  
    }  

存儲在localStorage的聊天用戶的記錄格式

{  
        "96298": {  
            "content": "1111",   
            "touxiang": "http://tp.i4ww.com/uploads/touxiang/14819000766806548.jpeg",   
            "nowTime": "1-6 0:39",   
            "name": "你好"  
        },  
        "90000": {  
            "content": "1111",   
            "touxiang": "http://tp.i4ww.com/uploads/touxiang/14819000766806548.jpeg",   
            "nowTime": "1-6 0:39",   
            "name": "你好"  
        }  
    }