嗨～👋 欢迎来到JavaScript本地存储的世界。在这里，我们可以像烘焙师一样，将数据烘焙成小饼干（cookies），或者将它们保存在冰箱（localStorage）里，以便下次访问时能够快速取用。🍰🧊 今天，我们将一起学习如何在用户的浏览器中保存和管理这些数据小点心。
目录
1. 甜蜜小点心：Cookies
1.1 创建Cookies
1.2 读取Cookies
1.3 删除Cookies
2. 冰箱存储：localStorage和sessionStorage
2.1 localStorage：长期保存
简单数据类型
复杂数据类型
2.2 sessionStorage：临时保存
3. 存储限制
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
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
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：长期保存
简单数据类型
// 保存数据localStorage.setItem('favColor', '#ff0000');// 读取数据console.log(localStorage.getItem('favColor')); // 输出: #ff0000// 删除数据localStorage.removeItem('favColor');localStorage中的数据没有过期时间，会一直保存直到主动删除。复杂数据类型
// 创建一个对象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：临时保存
// 保存数据sessionStorage.setItem('sessionKey', 'sessionValue');// 读取数据console.log(sessionStorage.getItem('sessionKey')); // 输出: sessionValue// 删除数据sessionStorage.removeItem('sessionKey');sessionStorage中的数据仅在页面会话期间有效，关闭标签页后数据会被清除。
3. 存储限制
Cookies的大小限制通常为4KB。
localStorage和sessionStorage的大小限制通常为5MB左右，但这个值可能因浏览器而异。
4. 安全性注意事项
由于存储在客户端，这些数据容易被篡改。因此，敏感信息不应存储在本地。
使用HTTPS来保护传输过程中的数据不被窃取。
好啦，亲爱的朋友们，我们今天的JavaScript本地存储之旅就到这里啦！🚀 希望你们喜欢这次的探险，并且学到了一些新知识。掌握本地存储是前端开发中非常基础且重要的技能，它可以让你的应用更加个性化和高效。如果你有任何疑问，或者想要更多地了解这个话题，随时欢迎留言哦！我们下次再见啦！👋
