百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> 浏览器缓存数据localStorage数据例子
分享文章到:

浏览器缓存数据localStorage数据例子

发布时间:01/15 来源: 浏览: 关键词:
localStorage如果你使用过百度编辑器肯定知道localStorage是什么,如果不知道没有关系我们来看一个关于localStorage的例子。

实际应用   返回上一步ajax 读取的数据丢失了 。。通过浏览器缓存就可以保存住了

 代码如下

function saveCity() {
 
     var province =$("#province").val();
     var city=$("#city").val();
     var area=$("#area").val();
 // alert("syheng"+province+"chis"+city+"ara"+area);
/*   localStorage.removeItem("province");
  localStorage.removeItem("city");
  localStorage.removeItem("area"); */
     localStorage.setItem('province', province);
     localStorage.setItem('city', city);
     localStorage.setItem('area', area);
  }

 function loadCity() { 
  var province= localStorage.getItem('province');
  var city= localStorage.getItem('city');
  var area= localStorage.getItem('area'); 
  //alert("syheng"+province+"chis"+city+"ara"+area);
  if(province!=null&&city!=null&&area!=null){
   $.ajax({  
       url:baseUrl+'/getAddressJson.json', 
       data:{
        'area':area,
        'city':city,
        'province':province
       },
       type:'post', //数据发送方式  
       async: false,
    dataType : "json",
          success: function(data){
             $("#province").empty();
             $("#city").empty();
             $("#area").empty();
             $.each( data.plist, function(index, content)
               { 
                var appendStr = "<option value='" + content.code + "' ";
         if (content.code == province) {
          appendStr = appendStr + "selected = 'selected'";
         }
          appendStr = appendStr + ">" + content.name + "</option>"
                      $("#province").append(appendStr);
                  
               });
            
                $.each( data.clist, function(index, content)
               { 
                var appendStr = "<option value='" + content.code + "' ";
         if (content.code == city) {
          appendStr = appendStr + "selected = 'selected'";
         }
          appendStr = appendStr + ">" + content.name + "</option>"
                      $("#city").append(appendStr);
                  
               });
                 $.each( data.alist, function(index, content)
               { 
                var appendStr = "<option value='" + content.code + "' ";
         if (content.code == area) {
          appendStr = appendStr + "selected = 'selected'";
         }
          appendStr = appendStr + ">" + content.name + "</option>"
                      $("#area").append(appendStr);
                  
               });
          }
   }); 
  }
 
 
   
 }
 loadCity();


下面是解释


① localstorage大小限制在500万字符左右,各个浏览器不一致
② localstorage在隐私模式下不可读取
③ localstorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
④ localstorage不能被爬虫爬取,不要用它完全取代URL传参
localstorage存储对象分为两种:

① sessionStrage: session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,session对象的有效期就只有这么长。

② localStorage: 将数据保存在客户端硬件设备上,不管它是什么,意思就是下次打开计算机时候数据还在。

两者区别就是一个作为临时保存,一个长期保存。

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有1人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板