浏览器存储数据的几种方式

---

一、localStorage

将数据存储到浏览器中，有效期是在不进行手动删除的情况下一直有效的。

1.1 存储数据

// 假设你有一个对象或字符串要保存  
let data = { name: 'John', age: 30 };  
  
// 因为localStorage只能保存字符串，所以你需要将数据转换为JSON字符串  
localStorage.setItem('myData', JSON.stringify(data));

1.2 读取数据

// 使用getItem方法并解析返回的JSON字符串  
let retrievedData = JSON.parse(localStorage.getItem('myData'));  
  
console.log(retrievedData); // 输出: { name: 'John', age: 30 }

1.3 更新数据

// 更新对象的一个属性  
retrievedUser.age = 31;  
  
// 将更新后的对象转换为 JSON 字符串并重新存储  
localStorage.setItem('user', JSON.stringify(retrievedUser));

1.4 删除数据

// 删除指定的数据项  
localStorage.removeItem('user');

1.5 清除所有数据

// 清除 localStorage 中的所有数据  
localStorage.clear();

1.6 获取长度

// 使用 localStorage.length 获取键的数量  
var length = localStorage.length;  

1.7 循环遍历

// 假设我们已经在 localStorage 中存储了一些数据  
localStorage.setItem('key1', 'value1');  
localStorage.setItem('key2', 'value2');  
localStorage.setItem('key3', 'value3');  
  
// 使用 localStorage.length 获取键的数量  
var length = localStorage.length;  
  
// 使用循环遍历所有的键  
for (var i = 0; i < length; i++) {  
    // 使用 localStorage.key(index) 获取键名  
    var key = localStorage.key(i);  
    // 使用 localStorage.getItem(key) 获取对应的值  
    var value = localStorage.getItem(key);  
      
    console.log('Key: ' + key + ', Value: ' + value);  
}

输出

Key: key1, Value: value1  
Key: key2, Value: value2  
Key: key3, Value: value3

二、Cookies

有效期是可以设置的，默认情况下是关闭浏览器后失效。但也可以通过设置expires属性来指定一个具体的过期时间。
Cookies：通常存储量较小，大约为4KB左右。由于每次HTTP请求都会携带Cookies，因此只适合保存很小的数据，如会话标识。

在前端，通常使用js-cookie，来处理cookie

下载

npm install js-cookie --save

引用

import Cookies from "js-cookie";

2.1 存储数据

// 创建一个 cookie，有效期为 7 天  
Cookies.set('username', 'John Doe', { expires: 7 });  

2.2 读取数据

// 读取一个 cookie  
var username = Cookies.get('username');  
  
// 读取一个包含对象的 cookie  
var user = Cookies.getJSON('user');

2.3 更新数据

// 更新一个 cookie 的值  
Cookies.set('username', 'Jane Doe'); // 这会覆盖之前的 'username' cookie

2.4 删除数据

// 删除一个 cookie  
Cookies.remove('username');

2.5 检查Cookie是否存在

// 检查一个 cookie 是否存在  
if (Cookies.get('username')) {  
    // 'username' cookie 存在  
}

三、sessionStorage

sessionStorage 是 Web Storage API 的一部分，它允许你在同一浏览器会话中存储键值对数据。与 localStorage 不同，sessionStorage 中的数据仅在当前浏览器会话中有效，即当页面会话结束（通常是浏览器窗口或标签页被关闭）时，存储的数据就会被清除。

3.1 存储数据

// 存储一个键值对  
sessionStorage.setItem('key', 'value');  
  
// 存储一个对象（需转换为 JSON 字符串）  
var obj = { name: 'John Doe', age: 30 };  
sessionStorage.setItem('user', JSON.stringify(obj));

3.2 读取数据

// 读取一个键值对  
var value = sessionStorage.getItem('key');  
  
// 读取一个对象（需从 JSON 字符串转换回对象）  
var user = JSON.parse(sessionStorage.getItem('user'));

3.3 更新数据

// 更新一个键值对，其实就是重新存储  
sessionStorage.setItem('key', 'new value');

3.4 删除数据

// 删除一个键值对  
sessionStorage.removeItem('key');  
  
// 清除所有键值对  
sessionStorage.clear();

3.5 监听

window.addEventListener('storage', function(event) {  
  if (event.storageArea === sessionStorage) {  
    if (event.key) {  
      console.log(event.key + ' was modified.');  
    } else {  
      console.log('sessionStorage was cleared.');  
    }  
  }  
});