三种缓存方案coolKie、localStorage、sessionStorage
cookie
cookie是小甜饼的意思,顾名思义,cookie确实非常小,他的大小限制在4KB左右。
他的主要用途有保存登录信息,比如你登录某个网站市场可以看到记住密码,这通常是通过在cookie中存入一段边界用户身份的数据来实现的。
localStorage
localStorage是HTML5标准中新加入的技术,他并不是什么划时代的新东西,早在IE6就有一个叫userData的东西用于本地存储。而当时考虑到浏览器兼容性的问题,更通用的方案是Flash,而如今,localStorage被大多数浏览器所支持,如果你的网站需要支持IE6+,那么userData作为你的polyfil的方案是一种错的选择
sessionStorage
sessionStorage 与localStorage的接口类似,但是保存数据的生命周期不同。做过后端开发的同学了解session这个词的意思是“会话”。而sessionStorage是一个前端的概念,他只是江一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但是当页面关闭之后,sessionStorage中的数据就会被清空
特性区别
特性 | cookie | localStorage | sessionStorage |
---|---|---|---|
数据的生命周期 | 一般由服务器生成,可设置失效时间。如果在浏览器端生成cookie,默认是关闭浏览器后失效 | 除非被清空,否则永久保存 | 仅在当前会话下有效,关闭页面或者浏览器或被删除 |
存放数量大小 | 4KB左右 | 一般为5MB | 一般为5MB |
与服务器端通信 | 每次都会携带zaiHTTP头部,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器中)保存,不参与和服务端的通信 | 仅在客户端(即浏览器中)保存,不参与和服务端的通信 |
易用性 | 需要程序员自己封装,原生的cookie接口不友好 | 原生接口可以用,也可以再次方砖来对Object和array有更好的支持 | 原生接口可以用,也可以再次方砖来对Object和array有更好的支持 |
缓存方案localStorage、sessionStorage简单的使用
sessionStorage
以下代码实现了
在index1.html中将数据写入sessionStorage
在index2中修改数据
最后在index3中获取数据并显示
(入口是index1.html文件)
Index1.html
<body>
<button style="height: 30px;" onclick="jump()">跳转到session2</button>
<script>
//临时存储使用的是key value数据结构
//注意value值只能是字符串无法存储对象
//关闭浏览器或者页面后数据会过期
//如果想要存储对象需要将对象转换成字符串
//JSON.stringify() 和 JSON.parse()
var preson = {
uname: '小明',
age:'18'
}
//将对象转换成字符串
var presonStr = JSON.stringify(preson);
console.log(presonStr);
//写入sessionStorage
window.sessionStorage.setItem("person",presonStr);
function jump(){
//跳转tag页面
location.replace('index2.html');
}
</script>
</body>
index2.html
<body>
<button style="height: 30px;" onclick="jump()">跳转到session3</button>
<script>
//获取数据并转化成对象
var personStr = sessionStorage.getItem('person');
var person = JSON.parse(personStr);
//修改数据
person.uname = '小红'
personStr = JSON.stringify(person);
//再次写入输入
sessionStorage.setItem('person',personStr)
function jump(){
//跳转页面
location.replace('index3.html');
}
</script>
</body>
index3.html
<body>
从session获取到的名称为:<span id="span_data"> </span>
<script>
// 获取span标签
var span_data = document.getElementById('span_data');
// 获取sessionStorage中的数据
var personStr = sessionStorage.getItem('person');
var person = null;
if(personStr != null && personStr.length > 0){
person = JSON.parse(personStr)
span_data.innerText=JSON.stringify(person.uname);
}else{
alert('没有获取到值');
}
console.log(personStr);
</script>
</body>
localStorage
以下代码实现了
在index1.html中将数据写入localStorage
在index2中修改数据
最后在index3中获取数据并显示
最后在index4.html 中清空localStorage中的数据
localStorage.removeItem(“person”);
(入口是index1.html文件)
Index1.html
<body>
<button style="height: 30px;" onclick="jump()">跳转到localStorage2</button>
<script>
//本地存储使用的是key value数据结构
//注意value值只能是字符串无法存储对象
//数据并不会过期
//如果想要存储对象需要将对象转换成字符串
//JSON.stringify() 和 JSON.parse()
var preson = {
uname: '小明',
age:'18'
}
//将对象转换成字符串
var presonStr = JSON.stringify(preson);
console.log(presonStr);
//localStorage
window.localStorage.setItem("person",presonStr);
function jump(){
//跳转tag页面
location.replace('index2.html');
}
</script>
</body>
index2.html
<body>
<button style="height: 30px;" onclick="jump()">跳转到localStorage3</button>
<script>
var personStr = localStorage.getItem('person');
var person = JSON.parse(personStr);
person.uname = '小红'
personStr = JSON.stringify(person);
localStorage.setItem('person',personStr)
function jump(){
location.replace('index3.html');
}
</script>
</body>
index3.html
<body>
从localStorage获取到的名称为:<span id="span_data"> </span>
<script>
// 获取span标签
var span_data = document.getElementById('span_data');
// 获取localStorage中的数据
var personStr = localStorage.getItem('person');
var person = null;
if(personStr != null && personStr.length > 0){
person = JSON.parse(personStr)
span_data.innerText=JSON.stringify(person.uname);
}else{
alert('没有获取到值');
}
console.log(personStr);
</script>
</body>
Index4.html 清空localStorage
<body>
<script>
localStorage.removeItem('person');
</script>
</body>