首页 javaWEB 浏览器缓存数据localStorage

浏览器缓存数据localStorage

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

实际应用   返回上一步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: 将数据保存在客户端硬件设备上,不管它是什么,意思就是下次打开计算机时候数据还在。

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

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

为您推荐

nodejs 整理记录

nodejs 整理记录

下载包 https://blog.csdn.net/m0_59878114/article/details/120274...
websocket测试html

websocket测试html

<!DOCTYPE html> <html> <head> <meta cha...
bigdemical两个数比较大小

bigdemical两个数比较大小

/*int result = bigdemical1.compareTo(bigdemical2) result = -...
Beetl2.7 中文文档

Beetl2.7 中文文档

Beetl目前版本是2.7.23,相对于其他java模板引擎,具有功能齐全,语法直观,性能超高,以及编写的模板容易维护等...
纯CSS实现多个便签在一行展示,拖动滚动

纯CSS实现多个便签在一行展示,拖动滚动

div <h2>请注意需要在移动端预览,PC端拖拽无效果</h2> <div class=...
返回顶部