常用的几种浏览器缓存方式和使用的总结
现在进行总结一下,对于cookie,localStorage,sessionStorage进行一个简单的比较。
对比差异
特性 | cookie | localStorage | sessionStorge |
---|---|---|---|
储存大小 | 4k | 5M(浏览器不同而不同) | 5M (浏览器不同而不同) |
存取方式 | 字符串 | 字符串(JSON转译) | 字符串(JSON转译) |
服务端通信 | 携带header中 | 不通信 | 不通信 |
生命周期 | 服务器生成,可设置过期时间 | 一直存在,除非清理空 | 浏览器关闭清空 |
应用场景 | 辨别用户身份、进行session跟 | 长久保存整个网站的数据 | 临时保存同一窗口(或标签页)的数据 |
详细介绍
- cookie
- cookie常用于前后点用户身份认证,标记用户。因为http是一种无状态协议(没有记忆),为了解决http记忆力的问题,用session去管理cookie。
- session在服务端会设置一个响应头Set-Cookie;客户端接收到,此后发送请求浏览器都会自动带上Cookie请求头。sessionc存放过多会无法扩张
- 将session提取出来,集中存放。
- 服务是不需要进行存储,服务可以通过解析token里面的信息来判断是否登陆。token 里面是可以携带cookie解析出来的信息的
- coolie—code
// sessionId通常存放在cookie当中 会话由浏览器控制 会话结束 session失效
u.cookie = {
}
//设置cookie
u.cookie.set = function(name, value, expiredays) {
var expires = ''
if (expiredays) {
var exdate = new Date()
exdate.setTime(exdate.getTime() + expiredays * (24 * 3600 * 1000))
expires = ';expires=' + exdate.toUTCString()
}
document.cookie = name + '=' + escape(value) + expires
}
//获取cookie
u.cookie.get = function(name) {
var arr = document.cookie.split('; ')
for (var i = 0; i < arr.length; i++) {
var temp = arr[i].split('=')
if (temp[0] === name) return unescape(temp[1])
}
return null
}
// 删除cookie
u.cookie.remove = function(name) {
u.cookie.set(name, '', -1)
}
- localStorage 、sessionStroage
- 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据
- 存储对象的方法:
javascript localStorage.setItem('cartInfor',JSON.stringify(data));
- 取出本地存储对象的方法
javascript JSON.parse(localStorage.getItem("cartInfor"))
- localStorage/sessionStroage–code
兼容android,setItem() 支持存储对象方法
u.storage = {
};
//获取localStorage对象,兼容android(android原生系统老系统不支持localstorage)
function uzStorage() {
var ls = window.localStorage;
var isAndroid = (/android/gi).test(window.navigator.appVersion);
if (isAndroid) ls = os.localStorage();
return ls;
}
// 设置本地储存
u.storage.set = function (key, value) {
var v = value;
if (typeof v === 'object') {
v = JSON.stringify(v);
v = 'obj-' + v;
}
var ls = uzStorage();
if (ls) ls.setItem(key, v);
};
//获取本地储存
u.storage.get = function (key) {
var ls = uzStorage();
if (ls) {
var v = ls.getItem(key);
if (!v) return;
if (v.indexOf('obj-') === 0) return JSON.parse(v.slice(4));
else return v;
}
};
//删除本地储存中的某些数据
u.storage.remove = function (key) {
var ls = uzStorage();
if (ls && key) ls.removeItem(key);
};
// 清空本地储存所有数据
u.storage.clear = function () {
var ls = uzStorage();
if (ls) ls.clear();
};
总结
对于cookie,sessionStorage等在前端框架中一般都有封装好的组件,像vue中的vue-ls ,js-cookie等,知识活学活用,知道原理之后更好的去优化提高自己的代码水平。