面试题20：localStorge与sessionStorge、cookie区别

面试官：请说一下localStorge与sessionStorge、cookie区别

html5中的Web Storage包括了两种存储方式。localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问。并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅是会话级别的存储。只允许同一窗口访问。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。

 

1 存储大小不同

cookie： 4K，
session : 5M,

local：5M

2 数据有效期不同
cookie可以设置， 设置过期时间， 也可以手动清空
session：仅在浏览器关闭前有效
local：永久有效，除非手动清除

3 作用域
cookie在所有同源窗口共享
session仅在一个浏览器共享，不同浏览器不共享
local在所有同源窗口共享

4 通信
cookie: 通过http,在浏览器和服务器传递
session仅在客户端
local仅在客户端

5 应用
cookie判断用户是否登陆过，记忆密码自动登录
session敏感账号一次登录，关闭浏览器删除
local个人长期登录， 长期保存数据

一.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：
sessionStorage.setItem(key, value)

获取数据：
sessionStorage.getItem(key)

删除数据：
sessionStorage.removeItem(key)

清空数据：(所有都清除掉)
sessionStorage.clear()
 

二.localStorage

1、声明周期永久生效，除非手动删除 否则关闭页面也会存在

2、可以多窗口同一浏览器可以共享

3、以键值对的形式存储使用

存储数据：
localStorage.setItem(key, value)

获取数据：
localStorage.getItem(key)

删除数据：
localStorage.removeItem(key)

清空数据：(所有都清除掉)
localStorage.clear()