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

embedded/2024/11/17 17:20:42/

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=/";

http://www.ppmy.cn/embedded/138300.html

相关文章

深入理解接口测试:实用指南与最佳实践5.0(二)

✨博客主页: https://blog.csdn.net/m0_63815035?typeblog 💗《博客内容》:.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 📢博客专栏: https://blog.csdn.net/m0_63815035/cat…

.netcore + postgis 保存地图围栏数据

一、数据库字段 字段类型选择(Type) 设置对象类型为:geometry 二、前端传递的Json格式转换 前端传递围栏的各个坐标点数据如下: {"AreaRange": [{"lat": 30.123456,"lng": 120.123456},{"lat": 30.123456…

【操作系统不挂科】<Linux进程概念(4)>选择题(带答案与解析)

前言 大家好吖,欢迎来到 YY 滴操作系统不挂科 系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 本博客主要内容,收纳了一部门基本的操作系统题目,供yy应对期中考试复习。大家可以参考 本章为选择题题库,试卷…

【Linux学习】【Ubuntu入门】1-4 ubuntu终端操作与shell命令1

1.使用快捷键CtrlAltT打开命令终端,或者单击右键点击… 2.常用shell命令 目录信息查看命令:ls ls -a:显示目录所有文件及文件夹,包括隐藏文件,比如以.开头的 ls -l:显示文件的详细信息 ls -al&#xff1…

Spark RDD中的迭代器

Spark RDD中的迭代器 1. 什么是迭代器? 迭代器 (Iterator) 是 Spark 中用于处理每个分区数据的核心组件。它提供了对分区内元素的顺序访问,并且是惰性计算(lazy evaluation)的实现基础。 在 Spark 中,RDD 的每个分区…

第八章利用css制造导航菜单

8.1 水平顶部导航栏 8.1.1 简单水平导航栏的设计与实现 8.1.1.1导航栏的创建 <nav>标签是 HIML5 新增的文档结构标签&#xff0c;用于标记导航栏&#xff0c;以便后续与网站的其他内整合&#xff0c;所以常用<nav>标签在页面上创建导航栏菜单区域。 例如,在<n…

C++创建型设计模式体现出的面向对象设计原则

C创建型设计模式&#xff08;如单例模式、工厂方法模式、抽象工厂模式、建造者模式、原型模式&#xff09;在实现过程中体现了许多软件设计原则&#xff0c;尤其是SOLID原则和KISS原则。这些模式的设计和应用有助于编写灵活、可维护和可扩展的代码。以下是每个模式如何体现这些…

day66 Floyd 算法 A * 算法

97. 小明逛公园 题目描述 小明喜欢去公园散步&#xff0c;公园内布置了许多的景点&#xff0c;相互之间通过小路连接&#xff0c;小明希望在观看景点的同时&#xff0c;能够节省体力&#xff0c;走最短的路径。 给定一个公园景点图&#xff0c;图中有 N 个景点&#xff08;…