cookie，storage用法和区别

Cookie

用法：

1. 设置 Cookie：

   document.cookie = "username=apple; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

2. 读取 Cookie：

   var x = document.cookie;

• 特点与限制：

• Cookie 的大小通常限制在 4KB（但这取决于浏览器和服务器）。
• Cookie 是与特定域名关联的，因此它们不能跨域访问。
• Cookie 会随着每个 HTTP 请求发送到服务器，这可能会影响性能。
• Cookie 通常用于存储用户偏好、会话标识等。
• 它们具有过期日期，可以设置为会话期间（浏览器关闭时过期）或特定的未来日期。
• Cookie 可以被设置为安全（仅在 HTTPS 连接中传输）和/或仅通过 HTTP 传输（不包含在客户端脚本中）。

Web Storage (localStorage 和 sessionStorage)

用法：

localStorage：持久化存储，即使用户关闭了浏览器或电脑，数据也不会丢失。

• 存储数据：

localStorage.setItem("lastname", "banana");

• 获取数据：

var lastname = localStorage.getItem("lastname");

• 删除数据：

localStorage.removeItem("lastname");

• 清除所有数据：

localStorage.clear();

1. sessionStorage：会话存储，数据仅在当前浏览器窗口或标签页的生命周期内存在，关闭窗口或标签页后数据会被清除。
   使用方式与 localStorage 类似。

特点与限制：

• Web Storage 的存储容量通常比 Cookie 大得多，通常在 5MB 左右（但这也取决于浏览器）。
• 数据仅存储在客户端，不会发送到服务器。
• 数据没有过期时间，但 sessionStorage 中的数据会在页面会话结束时被清除。
• 数据存储是键值对的形式，键和值都必须是字符串。对于非字符串值，您需要使用 JSON.stringify() 和 JSON.parse() 进行序列化和反序列化。
• localStorage 是持久化的，而 sessionStorage 是会话特定的。
• 与 Cookie 不同，Web Storage 数据不包含在 HTTP 请求头中，因此不会影响性能。

区别

• 存储机制：Cookie 存储在 HTTP 头中，而 Web Storage 存储在客户端的浏览器内。
• 容量：Web Storage 通常提供比 Cookie 更大的存储空间。
• 生命周期：Cookie 可以设置过期时间，而 Web Storage（特别是 localStorage）中的数据是持久的，除非用户或脚本显式删除。
• 作用域：Cookie 与特定域名关联，而 Web Storage 与特定域和特定协议（如 HTTP 或 HTTPS）关联。
• 性能：由于 Cookie 会随着每个 HTTP 请求发送到服务器，这可能会影响性能。而 Web Storage 数据不会发送到服务器，因此不会影响性能。
• 安全性：Cookie 可以设置为仅通过 HTTPS 传输，而 Web Storage 总是通过同一源策略保护，即数据只能由创建它的源脚本访问。

localStorage存储和获取对象类型的值

存储对象到 localStorage

// 假设我们有一个对象  
var user = {  
    name: "张三",  
    age: 30,  
    email: "zhangsan@example.com"  
};  
  
// 使用 JSON.stringify() 将对象转换为字符串  
var userString = JSON.stringify(user);  
  
// 将字符串存储到 localStorage  
localStorage.setItem("user", userString);  
  
console.log("对象已存储到 localStorage");

从 localStorage 获取对象

// 从 localStorage 获取存储的字符串  
var userString = localStorage.getItem("user");  
  
// 如果找到了数据，使用 JSON.parse() 将字符串转换回对象  
if (userString) {  
    var user = JSON.parse(userString);  
      
    // 现在你可以像操作普通对象一样操作 user 对象了  
    console.log(user.name); // 输出: 张三  
    console.log(user.age); // 输出: 30  
    console.log(user.email); // 输出: zhangsan@example.com  
} else {  
    console.log("没有找到数据");  
}

通过这种方式，可以很方便地在 localStorage 中存储和读取复杂的数据类型，如对象或数组。

尽管 localStorage 提供了跨会话持久化数据的能力，但它有存储空间的限制（通常是每个源（origin）5MB），且过多的数据可能会影响页面的加载速度或导致浏览器警告。因此，在存储大量数据时应谨慎使用。