嗨～👋 欢迎来到JavaScript本地存储的世界。在这里，我们可以像烘焙师一样，将数据烘焙成小饼干（cookies），或者将它们保存在冰箱（localStorage）里，以便下次访问时能够快速取用。🍰🧊 今天，我们将一起学习如何在用户的浏览器中保存和管理这些数据小点心。
目录
[1. 甜蜜小点心：Cookies](#1. 甜蜜小点心：Cookies)
[1.1 创建Cookies](#1.1 创建Cookies)
[1.2 读取Cookies](#1.2 读取Cookies)
[1.3 删除Cookies](#1.3 删除Cookies)
[2. 冰箱存储：localStorage和sessionStorage](#2. 冰箱存储：localStorage和sessionStorage)
[2.1 localStorage：长期保存](#2.1 localStorage：长期保存)
[2.2 sessionStorage：临时保存](#2.2 sessionStorage：临时保存)
[3. 存储限制](#3. 存储限制)
[4. 安全性注意事项](#4. 安全性注意事项)
1. 甜蜜小点心：Cookies
Cookies是服务器发送到用户浏览器的小块数据。它们可以被用来识别用户和存储会话信息。
1.1 创建Cookies
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
在这个例子中，我们创建了一个名为 username 的cookie，值为 John Doe ，并设置了过期时间。
1.2 读取Cookies
javascript
function getCookie(name) {
let cookieArray = document.cookie.split(';');
for(let i = 0; i < cookieArray.length; i++) {
let cookie = cookieArray[i].trim();
if (cookie.indexOf(name + "=") == 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}
return "";
}
console.log(getCookie("username")); // 输出: John Doe
这个函数可以帮助我们从浏览器中读取名为 username 的cookie。1.3 删除Cookies
javascript
function deleteCookie(name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
}
deleteCookie("username");
通过设置过期时间为过去的时间，我们可以删除指定的cookie。2. 冰箱存储：localStorage和sessionStorage
localStorage和sessionStorage是Web存储API的一部分，它们提供了一种在用户浏览器中存储数据的方式。
2.1 localStorage：长期保存
简单数据类型
javascript
// 保存数据
localStorage.setItem('favColor', '#ff0000');
// 读取数据
console.log(localStorage.getItem('favColor')); // 输出: #ff0000
// 删除数据
localStorage.removeItem('favColor');
localStorage中的数据没有过期时间，会一直保存直到主动删除。复杂数据类型
javascript
// 创建一个对象
let user = {
name: "Alice",
age: 25,
hobbies: ["reading", "coding"]
};
// 将对象转换为字符串并存储
localStorage.setItem('user', JSON.stringify(user));
// 从localStorage读取字符串，并转换回对象
let storedUser = localStorage.getItem('user');
let user = JSON.parse(storedUser);
console.log(user.name); // 输出: Alice
// 删除存储的对象
localStorage.removeItem('user');2.2 sessionStorage：临时保存
javascript
// 保存数据
sessionStorage.setItem('sessionKey', 'sessionValue');
// 读取数据
console.log(sessionStorage.getItem('sessionKey')); // 输出: sessionValue
// 删除数据
sessionStorage.removeItem('sessionKey');sessionStorage中的数据仅在页面会话期间有效，关闭标签页后数据会被清除。
3. 存储限制
Cookies的大小限制通常为4KB。
localStorage和sessionStorage的大小限制通常为5MB左右，但这个值可能因浏览器而异。
4. 安全性注意事项
由于存储在客户端，这些数据容易被篡改。因此，敏感信息不应存储在本地。
使用HTTPS来保护传输过程中的数据不被窃取。
好啦，亲爱的朋友们，我们今天的JavaScript本地存储之旅就到这里啦！🚀 希望你们喜欢这次的探险，并且学到了一些新知识。掌握本地存储是前端开发中非常基础且重要的技能，它可以让你的应用更加个性化和高效。如果你有任何疑问，或者想要更多地了解这个话题，随时欢迎留言哦！我们下次再见啦！👋