localStorage,sessionStorage和cookie的区别

liucx955 / 2023-08-12 / 原文

localStorage,sessionStorage和cookie的区别

生命周期

cookie

具有max-age属性: 存入内部的数据, 只要没有超过最大存活时间, 就会永久保留

不具有max-age属性: 这类cookie被称为会话级cookie, 当用户关闭标签页或者浏览器, 数据就会丢失

localStorage(持久化存储) : 只要不主动去删除, 就会永久保存

sessionStorage(会话级存储) : 在关闭标签页或者关闭浏览器的时候, 就会丢失

存储位置

cookie

有max-age属性: 存储在硬盘里

无max-age属性: 存储在内存中

localStorage: 存储在硬盘中

sessionStorage: 存储在内存中

存储大小

cookie: 4KB

localStorage: 一般5MB, IE是3012KB

sessionStorage: 一般5MB, IE是3012KB

作用范围

cookie , 受到两个属性的控制

domain属性: 比如domain为".baidu.com", 表示只有该域名以及它的子域名可以读取

path属性: 比如path为"/a", 表示只有该路由以及它的子路由可以读取

localStorage: 只要地址相同, 哪怕是不同的标签页,都可以同步更新

sessionStorage: 地址相同, 不同的标签页可以获取数据, 但是这个数据不是同步更新的, 也就是修改了一个标签页, 另一个不会更新

与服务器的关系

cookie

cookie更像是被服务器借用的本地存储

浏览器会自动存储cookie, 还会自动发送cookie

服务器如果想要返回cookie, 那么就会在响应头中, 添加属性setCookie属性, 用于返回数据

浏览器如果想要返回cookie数据给服务器, 那么就会在请求头中, 添加Cookie属性用于发送数据

localStorage: 他是HTML5新特性,与服务器不熟

sessionStorage: 他是HTML5新特性,与服务器不熟

使用场景

cookie: 可以节省服务器的成本

localStorage: 如果是关闭项目之后还要使用的数据, 选择使用localStorage存储

sessionStorage:如果有一个数据, 只在项目关闭之前使用, 考虑到运算速度, 会使用sessionStorage