一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存,减少对服务器的请求。
1.cookie数据存放在本地硬盘中,只要在过期时间之前,都是有效的,即使重启浏览器。但是会在每次HTTP请求中添加到请求头中,如果数据过多,会造成性能问题。
2.sessionStorage保存在浏览器内存中,当关闭页面或者浏览器之后,信息丢失。
3.localstorage也是保存在本地硬盘中,除非主动清除,信息是不会消失的。但是实际使用时我们需要对缓存设置过期时间,本文便是讲解如何为localstorage添加过期时间功能。
这三者仅支持同源(host+port)的数据,不同源的数据不能互相访问到。
localstorage
localstorage支持以下方法:
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
需要注意的是,仅支持String类型数据的读取,如果存放的是数值类型,读出来的是字符串类型的,对于存储对象类型的,需要在保存之前JSON化为String类型。
小实例:
css:
*{ margin:0; padding:0; font-size:20px; } .box{ box-sizing: border-box; width:100%; padding:0 20px; } .contentk{ width:100%; height:30px; display: flex; align-items: center; margin-top:20px; } .contentk>div{ width:25%; } .contentk>input{ width:75%; height:100%; font-size:16px; padding:0 5px; } .contentk>input::-webkit-input-placeholder{ color:#cccccc; font-size:15px; } .aging{ margin-top:20px; } .aging>div:nth-child(2){ margin-top:10px; display: flex; } label{ width:100%; display: flex; align-items: center; justify-content: center; padding:5px 0; border:1px solid #eeeeee; } .btn,.btn1{ width:100%; padding:5px 0; margin-top:20px; }
html:
<div class="box"> <div class="contentk"> <div>名字:</div> <input type="text" class="name" placeholder="请输入你的名称" /> </div> <div class="contentk"> <div>备注:</div> <input type="text" class="note" placeholder="请输入你要备注的内容" /> </div> <div class="aging"> <div>请选择保存时长:</div> <div> <label><span>1分钟</span><input type="radio" name="storage" value="1分钟" /></label> <label><span>1小时</span><input type="radio" name="storage" value="1小时" /></label> <label><span>24小时</span><input type="radio" name="storage" value="24小时" /></label> <label><span>1周</span><input type="radio" name="storage" value="1周" /></label> </div> </div> <input type="button" class="btn" value="保存" /> <input type="button" class="btn1" value="获取保存数据" /> </div>
js:
//保存数据 $(".btn").click(function(){ var name=$(".name").val(); var note=$(".note").val(); var radioValue = $("input[name='storage']:checked").val(); if(radioValue==undefined){ return alert("请选择保存时长"); } var data={ name:name, note:note, radioValue:radioValue } set('test',data); alert("保存成功"); }) function set(key,value){ var curTime = new Date().getTime(); var dateee = new Date().toJSON(curTime); var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/.[d]{3}Z/,''); localStorage.setItem(key,JSON.stringify({data:value,time:curTime,"保存时间":date})); } //获取数据 $(".btn1").click(function(){ var data =JSON.parse(localStorage.getItem('test')); if(data==null){ return alert("保存信息已过期或未保存数据"); } var time=data.time; var radioValue=data.data.radioValue; var st=""; if(radioValue=="1分钟"){ st=1000*60; }else if(radioValue=="1小时"){ st=1000*60*60; }else if(radioValue=="24小时"){ st=1000*60*24; }else if(radioValue=="1周"){ st=1000*60*24*7; } if (new Date().getTime() - time>st) { alert('保存信息已过期'); localStorage.removeItem("test"); }else{ var curTime = new Date().getTime(); var dateee = new Date().toJSON(curTime); var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/.[d]{3}Z/,''); $(".box").after(`<div>名字:${data.data.name}</div> <div>备注:${data.data.note}</div><div>保存时长:${data.data.radioValue}</div> <div>保存时间:${data.保存时间}</div> <div>现在时间:${date}</div>`) } })