cookie sessionStorage localStorage

最新推荐文章于 2022-03-17 23:23:49 发布

小白变怪兽

最新推荐文章于 2022-03-17 23:23:49 发布

阅读量391

点赞数 2

分类专栏： html5

本文链接：https://blog.csdn.net/u013558749/article/details/54960222

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5中提供了两种web存储方式：sessionStorage和lacalStorage;它们有以下几个共同特性：

设置读取方便（通过键值对）；
容量较大，sessionStorage大约有5M,localStorage大约有20M;
如果要存储json数据，可以使用JSON.stringify()将对象转为字符串后保存；

sessionStorage

1.关闭浏览器窗口的时候，数据也被清除；
2.在同一个窗口下数据是可以共享的

localStorage

1.永久生效，除非手动清除；
2.可以多窗口共享

使用方法

两种存储方式，只是前缀不同，调用的方法是一致的。
1.setItem(key,value)–设置存储内容
eg: sessionStorage.setItem(‘test’,’content’)
localStorage.setItem(‘test’,’content’)
2.getItem(key)读取存储内容
3.removeItem(key)删除键值为key的存储内容
4.cleaer()清空所有存储内容
5.key(n)以索引值来获取存储内容

关于cookie

1.cookie的缺点
（1）http请求头会带着
（2）带下4k
（3）主Domain污染

2.主要区别：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

sessionStorage/localStorage/cookie比较：

差异性：

相同点：都是存储数据，存储在web端，并且都是同源

不同点：

1.cookie 只有4K 小并且每一次请求都会带上cookie 体验不好，浪费带宽

2.session和local直接存储在本地，请求不会携带，并且容量比cookie要大的
3.session 是临时会话，当窗口被关闭的时候就清除掉，而 local永久存在，cookie有过期时间
4.cookie 和local都可以支持多窗口共享，而session不支持多窗口共享但是都支持a链接跳转的新窗口

参考：http://www.cnblogs.com/hynb/p/6037021.html