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