H5 本地存储学习笔记

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": "你好"
    }
}