目录
一、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.');
}
}
});