HTML5 sessionStrage localStorage cookie
sessionStrage 是HTML5新增的会话存储对象，不具有跨域等一切异/多 页面操作 ，用于临时保存同一窗口（标签页）的数据，在窗口关闭或浏览器关闭将会删除这些数据。
与之相对应的有 localStorage 将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。
下面详细对于前端页面缓存进行整理一下：
前端缓存有 cookie sessStrage localStorage 三种。
1.cookie
1)大小限制。cookie大小限制在4k左右，不适合存业务数据，多用于身份认证
2)随HTTP事务发送。cookie每次都会随HTTP事务一起发送，一般请求会占用浪费带宽
1.1应用
js设置cookie
document.cookie="popped=yes"
var cookie = {//封装好的方法
set:function(key,val,time){//设置cookie方法
var date=new Date(); //获取当前时间
var expiresDays=time; //将date设置为n天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化为cookie识别的时间
document.cookie=key + "=" + val +";expires="+date.toGMTString(); //设置cookie
},
get:function(key){//获取cookie方法
/*获取cookie参数*/
var getCookie = document.cookie.replace(/[ ]/g,""); //获取cookie，并且将获得的cookie格式化，去掉空格字符
var arrCookie = getCookie.split(";") //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
var tips; //声明变量tips
for(var i=0;i<arrCookie.length;i++){ //使用for循环查找cookie中的tips变量
var arr=arrCookie[i].split("="); //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
if(key==arr[0]){ //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
tips=arr[1]; //将cookie的值赋给变量tips
break; //终止for循环遍历
}
},
delete:function(key){ //删除cookie方法
var date = new Date(); //获取当前时间
date.setTime(date.getTime()-10000); //将date设置为过去的时间
document.cookie = key + "=v; expires =" +date.toGMTString();//设置cookie
}
return tips;
}
}
jQuery 操作cookie
$.cookie('the_cookie', 'the_value');
//添加一个"会话cookie"
$.cookie('the_cookie','the_value',{
expires:7,
path:'/',
domain:'jquery.com',
secure:true
})
//expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
//path：（String）创建该Cookie的页面路径；
//domain：（String）创建该Cookie的页面域名；
//secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；
2.sessStrage
1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
2) 单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。
4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
5) 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
js设置sessionStorage
// 保存数据到sessionStorage
sessionStorage.setItem('key','value');
// 从sessionStorage获取数据
vardata=sessionStorage.getItem('key');
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
jQuery 操作sessionStorage
// 保存数据到sessionStorage
$.session.set('key', 'value')
// 从sessionStorage获取数据
$.session.get('key');
// 从sessionStorage删除保存的数据
$.session.remove('key');
// 从sessionStorage删除所有保存的数据
$.session.get('key');
3.localStorage
1）localStorage没有大小限制。限制的是浏览器对localStorage的限制 约500万字符左右，个浏览器不一致。
2）localStorage隐私模式不可读取。浏览器在设置成无痕浏览或者隐私模式时localStorage不可读取。
3）localStorage不能被爬虫获取。本质是在读写文件，不要用它完全取代URL传参，数据多的话会比较卡（Firefox会一次行将数据导入内存，想想就感觉吓人）。
4）localStorage没有时间限制。只要不手动清除缓存就会一直存在，如果后台设置有效时间，过期之后数据还是存在不过不可用
JS下的操作方法
- 获取键值：localStorage.getItem(“key”)
- 设置键值：localStorage.setItem(“key”,”value”)
- 清除键值：localStorage.removeItem(“key”)
- 清除所有键值：localStorage.clear()
- 获取键值2：localStorage.keyName
- 设置键值2：localStorage.keyName = “value”
JQ下的操作方法（JS方法前加”window.”）
- 获取键值：window.localStorage.getItem(“key”)
- 设置键值：window.localStorage.setItem(“key”,”value”)
- 清除键值：window.localStorage.removeItem(“key”)
- 清除所有键值：window.localStorage.clear()
- 获取键值2：window.localStorage.keyName
- 设置键值2：window.localStorage.keyName = “value”
demo:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript">
// JS操作部分
localStorage.JSa="JSA";
document.write(localStorage.JSa);
localStorage.setItem('JSb',' JSB');
document.write(localStorage.getItem('JSb'));
// JQuery操作部分
$(function(){
window.localStorage.JQa="JQA";
$("#a").text(window.localStorage.JQa);
window.localStorage.setItem('JQb','JQB');
$("#b").text(window.localStorage.getItem('JQb'));
});
</script>
</head>
<body>
<p id="a"></p>
<p id="b"></p>
</body>
</html>
浙公网安备 33010602011771号