JavaScript 存储 Cookie 的基本用法
在网页开发中,为了保存用户的某些状态信息或偏好设置，通常会使用 localStorage 或 sessionStorage，有时候我们可能需要将一些数据持久化存储到服务器端以供后续访问，这时可以利用 JavaScript 中的 localStorage 和 sessionStorage 来实现这一功能，但它们并不适用于所有场景，特别是当需要与后端交互时。
我们可以考虑使用 JavaScript 的内置对象 window.location 来获取当前页面的 URL，并将其作为参数发送给后端进行处理，这一步骤虽然较为复杂，但却是解决跨域问题的有效方法之一，在本文中，我们将重点介绍如何通过 localStorage 和 sessionStorage 实现简单的 cookie 存储和读取功能。
什么是 Cookies？
Cookies 是一种网络技术，用于跟踪用户行为或保存用户的偏好设置，通过在客户端存储这些信息，开发者能够更好地了解用户需求并提供个性化的服务，需要注意的是，由于安全性和隐私性的问题，很多浏览器默认禁止了对非受信任源（如第三方网站）的 cookies 的写入操作，在实际应用中，我们需要谨慎对待 cookies 的存储和访问。
使用 localStorage 存储数据
我们需要创建一个新的对象来封装我们的数据,
let data = {
name: "John",
age: 30,
};
我们可以将这个对象存储在 localStorage 中：
function saveData(key, value) {
localStorage.setItem(key, JSON.stringify(value));
}
要从 localStorage 中读取数据，可以使用以下函数：
function getData(key) {
let data = localStorage.getItem(key);
if (data !== null && data !== undefined) {
return JSON.parse(data);
}
return null;
}
使用 sessionStorage 存储数据
sessionStorage 类似于 localStorage，但它仅限于当前会话期间的数据存储，一旦会话结束，其内容就会被清除，这意味着 sessionStorage 不适合长期保存数据。
同样地,你可以创建一个包含数据的对象：
let sessionData = {
username: "Alice",
email: "[email protected]",
};
function saveSessionData(key, value) {
sessionStorage.setItem(key, JSON.stringify(value));
}
function getSessionData(key) {
let data = sessionStorage.getItem(key);
if (data !== null && data !== undefined) {
return JSON.parse(data);
}
return null;
}
结合使用 localStorage 和 sessionStorage
有时,你可能需要同时在 localStorage 和 sessionStorage 中存储相同的数据，在这种情况下，你可以为每个属性创建一个新的对象，然后分别存放到这两个不同的对象中。
// 创建两个对象，分别存储到 localStorage 和 sessionStorage
const userObjLocalStorage = {};
const userObjSessionStorage = {};
function saveUserDetails(key, userDetails) {
userObjLocalStorage[key] = userDetails;
// 将用户详细信息存储到 sessionStorage 中
saveSessionData(key, userDetails);
}
function getUserDetails(key) {
const userLocal = userObjLocalStorage[key];
if (userLocal !== undefined) {
return userLocal;
}
const userSession = getSessionData(key);
if (userSession !== undefined) {
userObjLocalStorage[key] = userSession;
return userSession;
}
return null;
}
JavaScript 提供了两种方便的方法——localStorage 和 sessionStorage —— 来实现本地存储数据的功能，尽管这两种方法各有特点，但在处理跨域请求、需要长时间保存数据的情况下，建议优先选择 localStorage，而 sessionStorage 则更适合临时存储数据或者在单次会话内共享数据，通过合理组合这两种方法，我们可以构建出更灵活且高效的本地存储解决方案。
上一篇