- Cookie LocalStorage SessionSto
- cookie、sessionStorage和localStora
- cookie、sessionStorage和localStora
- cookie,sessionStorage和localStora
- cookie、sessionStorage和localStora
- cookie、sessionStorage和localStora
- cookie、sessionStorage和localStora
- cookie,sessionStorage和localStora
- Cookie、sessionStorage和localStora
- cookie、sessionStorage和localStora
基本概念
cookie:存储在客户端的小型文本文件,可以包含若干键值对,每个键值对可以设置过期时间(默认过期时间为关闭浏览器时)。 cookie会在每次发送HTTP请求时附加到Cookie头字段,服务器以此得知用户所处的状态。 cookie限制在4kb
sessionStorage:会话存储,存储在本地,不会被发送到服务器上,并且关闭后存储的内容失效。最多可以存储5-10M
localStorage:本地存储,不会被发送到服务器上,默认会永久存储,除非手动删除。最多可以存储5-10M
Storage支持的浏览器版本
imp.png差异
特性 | 数据的生命周期 | 存储大小 | 发送服务端 | 易用性 |
---|---|---|---|---|
cookie | 关闭浏览器实效(可配置) | 4kb | 携带在HTTP头中 | 差 |
sessionStorage | 当前会话下有效,关闭页面或浏览器后被清除 | 5mb | 需要在代码里主动上传服务端 | 好 |
localStorage | 永久有效,除非手动删除 | 5mb | 需要在代码里主动上传服务端 | 好 |
使用
cookie:
//记录cookie值
function setCookie (name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
};
//获取cookie值
function getCookie (name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr !== null){
return unescape(arr[2]);
}else{
return null;
}
};
//删除cookie值
function deleteCookie (name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
document.cookie = name + "=; expires=" + exp.toGMTString();
};
sessionStorage:
// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
localStorage:
// 保存数据到localStorage
localStorage.setItem('key', 'value');
// 从localStorage获取数据
var data = localStorage.getItem('key');
// 从localStorage删除保存的数据
localStorage.removeItem('key');
// 从localStorage删除所有保存的数据
localStorage.clear();
网友评论