当前位置: 首页 > 科技观察

HTML5本地存储Localstorage

时间:2023-03-12 06:35:26 科技观察

什么是localstorage前几天发现老项目中对cookies的操作很奇怪。经过咨询,本来想缓存一些信息,避免在url上传递参数,但是没有考虑到cookie会带来什么问题:cookie大小限制在4k左右,不适合存放业务数据。Cookie每次都与HTTP事务一起发送,这会浪费带宽。我们是做移动项目的,所以这里真正适合使用的技术是localstorage。localstorage可以说是对cookie的优化,使用它可以方便的在客户端存储数据,不会用HTTP传输,但是也不是没有问题:localstorage的大小限制在500万字符左右,而且不同浏览器不一致。在隐私模式下无法读取Localstorage。localstorage的本质就是读写文件。如果数据很多,会比较卡顿(firefox会一次性把数据导入内存,想想都吓人)。避免,所以我们的重点应该放在如何使用localstorage,以及如何正确使用上。localstorage使用基础知识localstorage存储对象分为两种:①sessionStrage:session的意思是session。这里的session是指用户浏览一个网站时,从进入网站到关闭网站的时间段。会话对象的有效期就是这么长。②localStorage:保存客户端硬件设备上的数据,无论是什么,都代表下次开机时数据还在。两者的区别在于,一个是临时存储,一个是长期存储。下面是一个简单的代码来说明它的基本用法:

sessionStoragelocalStorage保存数据读取数据真在场景实际工作中,localstorage的使用一般有以下需求:①缓存通用信息,如搜索页面的出发城市、到达城市,非实时位置信息②缓存城市列表数据,这个数据往往比较大③每个缓存的信息都需要可用的Tracking。例如,服务器通知城市数据更新。此时,必须在上次访问期间自动设置到期日期。④每条信息都有过期状态,需要在过期时间外的时间由服务器拉取数据⑤...define([],function(){varStorage=_.inherit({//Defaultpropertyproperties:function(){//代理对象,默认为localstoragethis.sProxy=window.localStorage;//60*60*24*30*1000ms==30天this.defaultLifeTime=2592000000;//本地缓存为用于存储所有localstorage键值和过期日期的映射this.keyCache='SYSTEM_KEY_TIMEOUT_MAP';//当缓存容量满时,每次删除的缓存数量this.removeNum=5;},assert:function(){if(this.sProxy===null){throw'notoverridesProxyproperty';}},initialize:function(opts){this.propertys();this.assert();},/*新的localstorage数据格式包括唯一键值、json字符串、过期日期、存储日期sign是一个格式化的请求参数,用于同一个请求有不同参数时返回新的数据,比如ci的list北京的ties,切换到上海后会判断tag不同,更新缓存数据。tag相当于对每个key值进行签名,只会缓存一条消息*/set:function(key,value,timeout,sign){var_d=newDate();//存储日期varindate=_d.getTime();//最终保存的数据varentity=null;if(!timeout){_d.setTime(_d.getTime()+this.defaultLifeTime);timeout=_d.getTime();}//this.setKeyCache(key,timeout);实体=这个if(e.name=='QuotaExceededError'){//this.sProxy.clear();//当localstorage满了,选择最接近过期时间的数据删除,会有些影响,不过感觉总比全部清除好,如果缓存太多,这个过程比较耗时,if(!this.removeLastCache())在100ms内抛出'本次存储的数据量太大';this.set(key,value,timeout,sign);}console&&console.log(e);}returnfalse;},//删除过期缓存removeOverdueCache:function(){vartmpObj=null,i,len;varnow=newDate().getTime();//获取键值对varcacheStr=this.sProxy.getItem(this.keyCache);varcacheMap=[];varnewMap=[];if(!cacheStr){return;}cacheMap=JSON.parse(cacheStr);for(i=0,len=cacheMap.length;i