cookie、sessionStorage和localStorage的区别

一、cookie、sessionStorage和localStorage的区别

1、相同点：都是保存在浏览器端、而且是同源的

2、区别：

 

 

	Cookie	Session Storage	local Storage
数据有效时间不同	可自己设置，默认到浏览器关闭	浏览器关闭之前有效	始终有效，窗口或浏览器关闭也—直保存，因此用作持久数据，除非用户主动删除
存储大小限制也不同	4k/50条左右	5MB	5MB
数据与服务器之间的交互方式不同	http 请求头中（请求的时候自动携带） 前后端都可以操作	不参与服务器通信、 只能前端操作	仅在客户端 只能前端操作
作用域不同	在所有同源窗口中都是共享的	在不同的窗口中不能共享，哪怕是同一个页面。	在所有同源窗口中都是共享的

二、操作方法

1、本地存储：window.localStorage

　　在本地存储存储/修改数据：localStorage.setItem(key,value)

 

 

 

 　   删除本地存储的一条数：localStorage.removeItem(key)

　　获取一个键对应的本地存储值：localStorage.getItem(key)

　　清空所有本地存储的数据 ：localStorage.clear()

2、会话存储：sessionStorage

　　在本地存储存储/修改数据：sessionStorage.setItem(key,value)

 　   删除本地存储的一条数：sessionStorage.removeItem(key)

　　获取一个键对应的本地存储值：sessionStorage.getItem(key)

　　清空所有本地存储的数据 ：sessionStorage.clear()

3、操作cookie

　　设置/修改：document.cookie = "key=value"

　　带过期时间的语法：document.cookie="key=value; expires=时间对象"

　　删除cookie：把过期时间设置成之前的时间　　　　　　　

let time = new Date();
time.setTime(time.getTime() - 8 * 60 * 60 * 1000 - 1000);
document.cookie = "a=1;expires=" + time

　　获取cookie：document.cookie