欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 社会 > 【学习】【HTML】localStorage、sessionStorage、cookie

【学习】【HTML】localStorage、sessionStorage、cookie

2024/11/18 8:53:37 来源:https://blog.csdn.net/m0_61097007/article/details/143748583  浏览:    关键词:【学习】【HTML】localStorage、sessionStorage、cookie

localStorage

localStorage 是 Web 存储(Web Storage)API 的一部分,用于在客户端浏览器中存储数据。

基本特性

  1. 存储容量:通常每个域名可以存储大约 5MB 的数据(不同浏览器可能有轻微差异)。
  2. 生命周期:localStorage 中的数据没有过期时间,除非用户手动清除或通过 JavaScript 删除。
  3. 同源策略:localStorage 受同源策略的限制,即只有来自同一个源(协议、域名和端口都相同)的脚本才能访问同一个 localStorage 对象。
    • 同一源下不同窗口或标签页是可以访问同一个localStorage对象。
  4. 数据类型:localStorage 只能存储字符串数据。如果需要存储复杂数据类型(如对象或数组),需要先将其转换为 JSON 字符串。

基本操作

  1. 存储数据:使用 setItem(key, value) 方法将数据存储到 localStorage 中。
localStorage.setItem('key', 'value');
  1. 读取数据:使用 getItem(key) 方法从 localStorage 中读取数据。
const value = localStorage.getItem('key');
console.log(value); // 输出: value
  1. 删除数据:使用 removeItem(key) 方法从 localStorage 中删除指定的键值对。
localStorage.removeItem('key');
  1. 清空所有数据:使用 clear() 方法清空 localStorage 中的所有数据。
localStorage.clear();

sessionStorage

sessionStorage 是 Web 存储的一种形式,它允许在浏览器中存储键值对。

基本特性

  1. 存储容量:通常每个窗口/标签页可以存储 5MB 左右的数据,具体取决于浏览器实现。
  • 每个标签页或窗口:每个浏览器窗口或标签页都有自己的 sessionStorage 实例,每个实例的存储限制通常是 5MB。
  • 不同标签页独立:即使在同一个源(域名)下,不同的标签页或窗口之间的 sessionStorage 是独立的,不会共享存储空间。
  1. 生命周期:数据在浏览器或标签页关闭后会被清除。除非用户手动清除或通过 JavaScript 删除。
  2. 同源策略:受同源策略的限制,即只有来自同一个源(协议、域名和端口都相同)的脚本才能访问相同的 sessionStorage 对象。
  3. 数据类型:只能存储字符串数据。如果需要存储复杂数据类型(如对象或数组),需要先将其转换为 JSON 字符串。

基本操作

  1. 设置数据:使用 setItem 方法来添加或更新键值对。
sessionStorage.setItem('key', 'value');
  1. 获取数据:使用 getItem 方法来获取指定键的值。
const value = sessionStorage.getItem('key');
  1. 删除数据:使用 removeItem 方法来移除指定键的数据。
sessionStorage.removeItem('key');
  1. 清空数据:使用 clear 方法来清除所有数据。
sessionStorage.clear();

cookie

cookie 是网站通过 Web 浏览器留在访问者电脑上的一小段信息。

基本特性

  1. 数据格式:Cookie 是键值对形式的文本数据,格式为 name=value。
  2. 大小限制:每个 Cookie 的最大大小通常为 4KB,每个域名下可以存储的 Cookie 总数通常不超过 20 个。
  3. 作用域:可以通过 Domain 和 Path 参数来指定 Cookie 的作用域。
  4. 生命周期:
  • Session Cookie:没有设置 Expires 或 Max-Age 的 Cookie,在浏览器关闭后会被删除。
  • Persistent Cookie:设置了 Expires 或 Max-Age 的 Cookie,会在指定的时间后过期。
  1. 安全属性:
  • Secure:表示这个 Cookie 只能通过 HTTPS 安全协议发送。
  • HttpOnly:防止客户端脚本(如 JavaScript)访问 Cookie,增加安全性。
  • SameSite:控制 Cookie 是否随跨站请求一起发送,以防止 CSRF 攻击。

基本操作

  1. 可以通过 document.cookie 属性来读取和设置 Cookie。
// 读取所有 Cookie
console.log(document.cookie);
// 设置一个 Cookie
document.cookie = "name=value; max-age=3600; path=/";

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com