H5 local storage study notes

The data stored by the localStorage method has no time limit. Data is still available after the next day, week or year.

 

The sessionStorage method stores data for a session. The data is deleted when the user closes the browser window.

 

Both key and value must be strings, in other words, the web storage API can only operate on strings.

 

if(window.localStorage){  //或者 window.sessionStorage     
    alert("Browse supports localStorage")   
}else{      
    alert("Browsing currently does not support localStorage")   
}   
  
//or   
if(typeof window.localStorage == 'undefined') {  //或者 window.sessionStorage   
    alert("Browsing currently does not support localStorage")   
}  

 

1、 保存数据：localStorage.setItem( key, value );      sessionStorage.setItem( key, value );

2. Read data: localStorage.getItem(key); sessionStorage.getItem(key);  

3. Delete a single data: localStorage.removeItem( key ); sessionStorage.removeItem( key );

4. Delete all data: localStorage.clear( ); sessionStorage.clear( );

5. Get the key of an index: localStorage.key( index ); sessionStorage.key( index );

 

---

 Chat history, the case of using local storage:

 

 

//Store chat history;
function storageMsg(userid,tempObj){
    // If the data is accessed for the first time, there is no local cache
    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));
    }

    // cache user chat history
    storageChatUserList(userid,tempObj);
}

 

 Chat history format stored in 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": "你好"
    }
]

 

 

//Store the list of people chatting;
function storageChatUserList(userid,tempObj){
    var userInfo = JSON.parse(window.localStorage.getItem(userid+"_userInfo"));
    // Cache chat user records, if not cached locally
    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);
    }
    // if there is data in the local cache
    else{
        var chatUserListObj = JSON.parse(window.localStorage.getItem("chatUserList"));
        // if there is already a cache
        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"));
}

 

Chat user record format stored in 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": "你好"
    }
}