一、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
![](https://common.cnblogs.com/images/loading.gif)