localStorage、sessionStorage 和 cookie全面对比
localStorage | sessionStorage | Cookie | |
储存位置 | 保存在客户端,不与服务器进行交互通信(硬盘中) | 保存在客户端,不与服务器进行交互通信(内存中) | 浏览器端 |
储存内容 | 存储字符串类型,对于复杂的对象可以使用JSON.stringify和JSON.parse来处理 | 与localStorage相同 | cookie只能保存字符串类型,以文本的方式,格式为 document.cookie = name='value; expires=UTC"; path=/'path 参数,属于的路径,默认为当前页面 |
生命周期 | 永久的,关闭页面或浏览器之后localStorage中的数据也不会消失 | 及在当前会话下有效,在关闭了浏览器窗口后就会被销毁 | 如果不在浏览器中设置过期事件,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件,cookie会被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期事件结束才消失。cookie是服务端发给客户端的特殊信息,cookie是以文本的方式保存在客户端,每次请求时都带上它 |
安全性 | 存在本地,相对安全 | 存在本地,相对安全 | 存在服务端,可能会被攻击 |
储存容量 | 一般5MB以内 | 与localStorage相同 | 单个cookie不能超过4KB |
获取方式 | window.localStorage | window.sessionStorage | window.document.cookie |
数据类型 | 'object' | 与localStorage相同 | 'string' |
添加修改值 | localStorage.setItem (key, value) 保存数据,以键值对的方式储存信息。 | 与localStorage相同 | 往下看 |
获取某项值 | localStorage.getItem (key) 获取数据,将键值传入,即可获取到对应的value值。key (index) —— 获取某个索引的key | 与localStorage相同 | 往下看 |
删除 | 删除指定键:localStorage.removeItem('key')清空全部项:localStorage.clear() | 与localStorage相同 | 往下看 |
缺点 | (1)浏览器的大小不统一,并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。 (2)目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换。 (3)localStorage在浏览器的隐私模式下面是不可读取的。 (4)localStorage不能被爬虫抓取到。 | (1)session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大 (2)依赖于cookie(sessionid保存在cookie),如果禁用cookie,则要使用URL重写 (3)创建session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以过度的使用session变量将会导致代码不可读而且不好维护。 | (1)大小受限 (2)用户可以操作(禁用)cookie,使功能受限 (3)安全性较低 (4)有些状态不可能保存在客户端 (5)每次访问都要传送cookie给服务器,浪费宽带 (6)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。 |
应用场景 | (1)长期登录(+判断用户是否已登录) (2)历史搜索记录 (3)用户习惯 | (1)网上商城中的购物车 (2)保存用户登录信息 (3)将某些数据放入session中,供同一用户的不同页面使用 (4)敏感账号一次性登录 | (1)判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。 (2)保存上次登录的时间等信息。 (3)保存上次查看的页面 (4)浏览计数 |
Cookie修改添加删除
js中并没有cookie修改添加删除等方法你可以通过document.cookie='xxx'进行修改但必须要保持document.cookie = name='value; expires=UTC"; path=/'path这种格式
//设置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//获取cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}
Cookie的属性值
属性名 | 说明 | 默认值 | 作用域 |
---|---|---|---|
Expires | 到期时间:UTC | - | - |
Max-Age | 到期时间:秒 优先级高于Expires | - | - |
domain | 所属域名 | 当前域名 | 默认当前域名, 指定值后是当前域名和子域名 |
path | 生效的路径 | 当前网址 | 当前路径及其子路径 |
HttpOnly | 无法通过 JavaScript 脚本拿到 | - | - |
Secure | 只有在加密协议 HTTPS 下生效 | - | - |
注意点
localStorage
- localStorage只在同源浏览器下储存,例如在谷歌中储存的在ie、火狐,360等浏览器中是不能读取的
sessionStorage
- 在当前页面创建的sessionStorage, 在当前页面不关闭的情况下,在同一个浏览器中打开当前页面sessionStorage也为空
Cookie
-
Cookie并不提供修改、 删除操作。 如果要修改某个Cookie, 只需要新建一个同名的Cookie, 添加到response中覆盖原来的Cookie。如果要删除某个Cookie, 只需要新建一个同名的Cookie, 并将maxAge设置为0, 并添加到response中覆盖原来的Cookie。 注意是0而不是负数。 负数代表其他的意义。 读者可以通过上例的程序进行验证, 设置不同的属性。
-
修改、 删除Cookie时, 新建的Cookie除value、 maxAge之外的所有属性, 例如name、 path、 domain等, 都要与原Cookie完全一样。 否则, 浏览器将视为两个不同的Cookie不予覆盖, 导致修改、 删除失败。
-
cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格
-
Cookie具有不可跨域名性