cookie、localStorage和sessionStorage的特点及用法

最新推荐文章于 2024-09-05 08:56:06 发布

原创最新推荐文章于 2024-09-05 08:56:06 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了浏览器的三种存储方式：Cookie、localStorage和sessionStorage。Cookie用于存储少量信息，通常4KB，关闭浏览器后如果没有设置失效时间则失效。localStorage和sessionStorage提供更大容量的存储，前者5MB且永久有效，后者5MB但只在当前会话内有效。通过示例代码展示了如何进行存储和读取操作，以及设置过期时间和存储路径。了解这些技术对于前端开发者管理用户数据至关重要。

cookie

一般由服务器生成,存放到客户端(浏览器中的)可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效.存储大约4Kb,存放条数30-50条左右,

// Date时间函数
var d = new Date() // 获取系统内置时间
var o = d.getTime() // 获取当前的时间戳
var b = d.getTime()+(7*60*60*24*1000) // 7天后的时间戳
var b = d.getTime()+(6000) // 6秒后的时间戳
d.setTime(b) // 根据时间戳设置日期
d.toGMTString() // 格林威治时间
d.toUTCString() // 世界时间

// 存储
document.cookie = 'sex=女';

// 存储并且设置过期时间
document.cookie='sex=女;expires='+d.toUTCString()

// 存储过期时间并设置存储位置 '/' 保存到根目录
document.cookie = 'sex=女;expires='+d.toUTCString() + ";path=/";

// 读取
console.log(document.cookie)

localStorage 本地存储

存储大小一般浏览器支持的是5Mb大小.永久有效，窗口或者浏览器关闭也会一直保存，不会自动清除，要手动永久清除，因此用作持久数据

localStorage.setItem('name','张三') // 添加
localStorage.setItem('name','李四') // 相同key的情况下是修改,现在localStorage存储的是name="李四"
localStorage.getItem('name') // 根据key(索引,键值)获取对应的值
localStorage.removeItem('name') // 根据键名删除
localStorage.clear() // 清除全部的localStorage

sessionStorage 临时存储

存储大小为5Mb大小, 仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除

sessionStorage.setItem('name','张三') // 添加
sessionStorage.setItem('name','李四') // 相同key的情况下是修改,现在sessionStorage存储的是name="李四"
sessionStorage.getItem('name') // 根据key(索引,键值)获取对应的值
sessionStorage.removeItem('name') // 根据键名删除
sessionStorage.clear() // 清除全部的sessionStorage