Cookie localstorage sessionstorage区别

答：

cookie是在HTML4中使用的给客户端保存数据的，也可以和session配合实现跟踪浏览器用户身份；而webstorage（包括：localStorage和sessionStorage）是在HTML5提出来的，纯粹为了保存数据，不会与服务器端通信。WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。

相同点：

 cookie，localStorage，sessionStorage都是在客户端保存数据的，存储数据的类型：都是字符串。

不同点：

1、生命周期：

1）、cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。

2）、localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

3）、sessionStorage仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

 可以简单的理解为：sessionStorage，没有设置有效期的cookie。

                               如果说把cookie的有效期设置为永远永远，永久，那么就是localStorage。

                                             cookie没有设置有效期，那么就是sessionStorage

2、网络流量：cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，webstorage更加节约网络流量。

3、大小限制：cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M

4、安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。

5、使用方便性上：WebStorage提供了一些方法，数据操作比cookie方便；

               setItem (key, value) ——  保存数据，以键值对的方式储存信息。

        getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

        removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

        clear () ——  删除所有的数据

        key (index) —— 获取某个索引的key

2017年12月27日 14:40 ·  阅读 6063

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，每一次发送请求都会携带上cookie，会造成带宽的浪费，给开发带来诸多不便，HTML5规范则提出解决方案。 web存储的含义是将数据存储到用户的电脑上，这样可以缓解服务器的压力，并且提高体验 ####特性 1、设置、读取方便 2、容量较大，sessionStorage约5M、localStorage约20M 3、只能存储字符串，可以将对象JSON.stringify() 编码后存储 ####window.sessionStorage 1、生命周期为关闭当前页面窗口 2、不能多窗口下数据可以共享 （同源策略，百度家的local阿里他们家是拿不到） 补充：通过跳转可以 运用场景： 页面跳转的时候可以通过session实现数据共享 在一些单页面（spa）的运用中，进行页面传值的时候比较有用 ####window.localStorage 1、永久生效，除非手动删除或用代码删除 2、可以多窗口共享（同源策略） 运用场景：一些不涉及到安全的一些数据（不要太过庞大）都可以存储到本地 ####方法详解 setItem(key, value)设置存储内容

getItem(key)读取存储内容

removeItem(key)删除键值为 key 的存储内容

clear()清空所有存储内容

key(n) 以索引值来获取 键名

length  存储的数据的个数

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

差异性：（面试经常问）
相同点：都是存储数据，存储在web端，并且都是同源
不同点：
（1）cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好，浪费带宽
（2）session和local直接存储在本地，请求不会携带，并且容量比cookie要大的多
（3）session 是临时会话，当窗口被关闭的时候就清除掉 ，而 local永久存在，cookie有过期时间
（4）cookie 和local都可以支持多窗口共享，而session不支持多窗口共享 但是都支持a链接跳转的新窗口
复制代码