localStorage、sessionStorage 和 cookie的区别

 相同点： 都存储在浏览器端，保存方式为字符串型的键值对；

不同点：

1、存储空间

cookie 的存储空间最小，只有4k 左右；一般是服务器端生成，用来标识用户身份的；

localStorage 和 sessionStorage 存储空间 5M 左右，用于浏览器缓存数据

 

2、存储时间

localStorage 可以长期存储在浏览器里，不会随着浏览器关闭而清除，除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除；

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；

临时存储： 如果有些数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，适合用 sessionStorage 来存储，其他情况多用 localStorage

 

3、数据跟服务器交互

cookie 的数据会自动的发送给服务器，同时服务器端也可以更改 cookie 的数据

localStorage 和 sessionStorage 仅保存在本地

cookie的作用是与服务器进行交互，作为http规范的一部分而存在的，而web Storage仅仅是为了在本地“存储”数据

 

4、作用域

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的

sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

上图：

 

 

 

补充 session 和 cookie 的区别：

cookie和session都是用来跟踪浏览器用户身份的会话方式。

1.cookie 保存在客户端，session 保存在服务器端

2.cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session

3.session会在一定时间内保存在服务器上，当访问增多，会占用服务器的性能，考虑到减轻服务器性能方面，应当使用cookie

4.session中保存的是对象，cookie中保存的是字符串

5.cookie 用来判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

6.Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。