必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-10-16 23:14:20来源:IT技术作者:seo实验室小编阅读:59次「手机版」
 

storge

###localStorge文档查看

在H5中,由于提供了相应的web客户端存储数据的方法,所以不用利用传统的追踪cookie的方法,实现更加高效,简单。

   HTML5中两种web存储的方法:

   localStorge-提供没有时间限制的web存储,每次访问网页都会被记录存储

   sessionStorage-针对一个session的web存储,只记录当前session的访问记录,关闭网页即恢复

   利用localStorage可以做一个网站访问量统计
 created() {
            var formjson=[];
            var obj = {
                bt:'',
                gnbj:'',
                gnfa:'',
                ys:'',
                bq:'',
                ssbq:'',
                fl:'',
                bmzt:false,
                zz:'',
                gxb:'',
                hqkf:false,
                bss:'',
                check: {
                     sub:function(){
                        var localdata=JSON.stringify($("form").serializeArray());
                        localStorage.setItem('localjson',localdata);
                        console.log(localdata)
                    },
                    get:function(){
                        //获取存储的参数
                        var ljson=[];
                    ljson = JSON.parse(localStorage.getItem('localjson'));
                    // ljson = localStorage.getItem('localjson');
                     //    push之前先清空数组,防止重复添加
                    formjson.splice(0,formjson.length);

                   $.each(ljson, function(e,e1) {
                       //判断类型,若类型不对,则v-model绑定失效,注意。
                    if(e1.value=='true'){
                        this.value=true
                       }else if(e1.value=='false'){
                           this.value=false
                       }
                       formjson.push(e1.value);
                        obj[e1.name]=e1.value;
                        // console.log(e1.name+'--'+e1.value);
                        //select下拉框问题解决
                        if(obj.fl==e1.value){
                            $('select').next().addClass('aa').val(e1.value);
                        }
                    // console.log('e1:'+JSON.stringify(e1));
                    // console.log(e1.name+'--'+e1.value);
                    });
                  
                }
                }
                
            }
            $('#auiscr').render(obj)
}
<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": "你好"  
        }  
    }

相关阅读

西部数据为ZB时代存储核心架构带来变革

&middot;数据爆发 全球进入ZB时代现在每一年人类所创造的数据总量都相当过去人类历史中产生数据的总和。根据预测,2023年人类数据

分布式存储基础之kad

在网上看到世界知名的电骡服务器Razorback 2被查封、4人被拘禁的消息,深感当前做eMule / BitTorrent等P2P文件交换软件的不易。以

33、Connection.prepareCall方法——调用数据库存储过

该方法通过创建一个CallableStatement对象来调用数据库存储过程。CallableStatement对象提供了设置其IN和OUT参数的方法,以及用来

华为大数据云对象存储服务

毫无疑问,云是数据中心的未来,随着数据中心以及物联网和移动设备的快速发展,我们已经来到一个信息爆炸的时代,据IDC报告,当下数据以每

SQLSERVER存储过程语法详解

1 2 3 4 5 6 7 8 9 10 11 CREATE PROC [ EDURE ] procedure_name [ ; number ]

分享到:

栏目导航

推荐阅读

热门阅读