JS本地存储使用教程

在前端开发中，JavaScript 本地存储是提升用户体验的关键技术之一。本文深入探讨 `localStorage` 和 `sessionStorage` 的使用，助你轻松掌握 JS 本地存储技巧。选择 `localStorage` 长期存储用户偏好，或使用 `sessionStorage` 在会话期间临时保存数据，需根据实际需求灵活应用。文章还将详细讲解本地存储的容量限制、数据类型转换、兼容性处理以及安全性问题，并提供实用代码示例，包括如何设置过期时间自动清理数据，以及如何通过 `postMessage` 和 CORS 解决跨域访问难题。掌握这些技巧，让你的 Web 应用更高效、安全！

选择 localStorage 还是 sessionStorage 取决于数据生命周期需求，localStorage 用于长期保存如用户偏好设置，sessionStorage 用于会话期间临时存储如购物车信息；2. 本地存储限制包括：每域名约 5MB 容量、仅支持字符串类型需用 JSON.stringify/parse 转换、同步操作可能阻塞主线程；3. 兼容性处理可通过检测 window.localStorage 是否存在，若不支持则降级使用 Cookie 或引入 store.js 等库自动适配；4. 安全性方面，本地存储易受用户篡改和 XSS 攻击，不应存储敏感信息如密码，必要时应加密并加强 XSS 防护；5. 清理本地存储可调用 localStorage.clear() 清空所有数据或 removeItem('key') 删除指定键，也可通过封装 setItemWithExpiry 和 getItemWithExpiry 方法实现带过期时间的自动清理机制；6. 跨域访问受同源策略限制，不同域名无法直接共享本地存储，可通过 postMessage 实现窗口间通信或使用 CORS 配合服务器端授权进行数据共享，具体选择依据是共享范围和系统复杂度。

在 JavaScript 中，实现本地存储主要依赖于 localStorage 和 sessionStorage 这两个 Web API。它们允许你在用户的浏览器中存储键值对，即使关闭浏览器后，localStorage 中的数据仍然存在，而 sessionStorage 中的数据则会在会话结束后被清除。

localStorage 和 sessionStorage 都是 window 对象的属性，使用起来非常简单。

localStorage.setItem('key', 'value') 用于存储数据，localStorage.getItem('key') 用于读取数据，localStorage.removeItem('key') 用于删除数据，localStorage.clear() 用于清空所有数据。

sessionStorage 的用法与 localStorage 完全相同，区别在于数据的生命周期。

如何选择 localStorage 和 sessionStorage？

选择 localStorage 还是 sessionStorage 取决于你的需求。如果需要长期保存数据，例如用户的偏好设置，那么 localStorage 是一个不错的选择。如果只是需要在当前会话中保存数据，例如购物车信息，那么 sessionStorage 更合适。

当然，你也可以根据实际情况，将两者结合使用。例如，使用 localStorage 保存用户的登录状态，使用 sessionStorage 保存用户的临时操作数据。

本地存储有哪些限制？

虽然本地存储很方便，但也有一些限制需要注意。

首先，存储容量有限制。一般来说，每个域名下 localStorage 和 sessionStorage 的存储容量都在 5MB 左右。不同的浏览器可能会有所差异，但通常不会超过这个范围。因此，不适合存储大量数据。

其次，本地存储只能存储字符串类型的数据。如果要存储其他类型的数据，例如对象或数组，需要先将其转换为字符串，然后再存储。读取数据时，再将其转换回原来的类型。通常可以使用 JSON.stringify() 和 JSON.parse() 方法来实现这个转换。

另外，本地存储是同步操作。这意味着在读写数据时，会阻塞 JavaScript 线程。如果存储的数据量较大，可能会导致页面卡顿。因此，建议尽量避免在主线程中进行大量的本地存储操作。

如何处理本地存储的兼容性问题？

虽然现代浏览器都支持 localStorage 和 sessionStorage，但为了兼容旧版本的浏览器，可能需要进行一些兼容性处理。

一种常见的做法是，先检测浏览器是否支持 localStorage 和 sessionStorage，如果不支持，则使用 Cookie 或其他替代方案。

function supportsLocalStorage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

if (supportsLocalStorage()) {
  // 使用 localStorage
} else {
  // 使用 Cookie 或其他替代方案
}

另一种做法是，使用一些现成的库，例如 store.js，它会自动检测浏览器是否支持 localStorage 和 sessionStorage，如果不支持，则使用其他替代方案。

本地存储安全性如何？

本地存储的数据存储在用户的浏览器中，因此存在一定的安全风险。

首先，本地存储的数据可以被用户修改。这意味着用户可以篡改你存储的数据，从而影响你的应用程序的正常运行。

其次，本地存储的数据可能会被恶意网站窃取。如果你的网站存在 XSS 漏洞，攻击者可以通过 JavaScript 代码读取你存储在 localStorage 和 sessionStorage 中的数据。

因此，不建议在本地存储中存储敏感信息，例如用户的密码或信用卡信息。如果必须存储敏感信息，应该对其进行加密处理。

另外，应该注意防范 XSS 攻击，避免恶意代码读取本地存储的数据。

示例代码：使用 localStorage 存储和读取用户信息

以下是一个简单的示例，演示如何使用 localStorage 存储和读取用户信息。

// 存储用户信息
function saveUserInfo(username, email) {
  const userInfo = {
    username: username,
    email: email
  };
  localStorage.setItem('userInfo', JSON.stringify(userInfo));
}

// 读取用户信息
function getUserInfo() {
  const userInfoStr = localStorage.getItem('userInfo');
  if (userInfoStr) {
    return JSON.parse(userInfoStr);
  } else {
    return null;
  }
}

// 示例用法
saveUserInfo('JohnDoe', 'john.doe@example.com');
const userInfo = getUserInfo();
if (userInfo) {
  console.log('Username:', userInfo.username);
  console.log('Email:', userInfo.email);
} else {
  console.log('No user info found.');
}

这段代码首先定义了两个函数：saveUserInfo 和 getUserInfo。saveUserInfo 函数用于存储用户信息，它接受用户名和邮箱地址作为参数，并将它们存储在 localStorage 中，键名为 userInfo。getUserInfo 函数用于读取用户信息，它从 localStorage 中读取键名为 userInfo 的数据，并将其解析为 JavaScript 对象。

然后，代码演示了如何使用这两个函数。首先，调用 saveUserInfo 函数存储用户信息。然后，调用 getUserInfo 函数读取用户信息，并将用户信息打印到控制台。

这个示例演示了如何使用 localStorage 存储和读取简单的 JavaScript 对象。你可以根据自己的需求，修改这段代码，存储和读取其他类型的数据。

如何清理本地存储？

清理本地存储有多种方式。

最简单的方式是使用 localStorage.clear() 方法，它可以清空所有存储在 localStorage 中的数据。

localStorage.clear();

另一种方式是使用 localStorage.removeItem('key') 方法，它可以删除指定键名的数据。

localStorage.removeItem('userInfo');

还可以通过设置过期时间来自动清理本地存储的数据。但 localStorage 本身并不支持设置过期时间。你需要自己实现这个功能。一种常见的做法是，在存储数据时，同时存储一个时间戳，表示数据的过期时间。在读取数据时，先检查当前时间是否超过了过期时间，如果超过了，则删除数据。

function setItemWithExpiry(key, value, expiry) {
  const now = new Date();
  const item = {
    value: value,
    expiry: now.getTime() + expiry,
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getItemWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) {
    return null;
  }

  const item = JSON.parse(itemStr);
  const now = new Date();

  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }

  return item.value;
}

// 示例用法：存储数据，过期时间为 1 小时
setItemWithExpiry('myKey', 'myValue', 3600000);

// 读取数据
const myValue = getItemWithExpiry('myKey');
if (myValue) {
  console.log('Value:', myValue);
} else {
  console.log('Key not found or expired.');
}

这段代码定义了两个函数：setItemWithExpiry 和 getItemWithExpiry。setItemWithExpiry 函数用于存储数据，它接受键名、值和过期时间作为参数。它将值和过期时间存储在一个对象中，并将该对象转换为 JSON 字符串，然后存储在 localStorage 中。getItemWithExpiry 函数用于读取数据，它从 localStorage 中读取数据，并检查是否已过期。如果已过期，则删除数据并返回 null。否则，返回数据的值。

这个示例演示了如何使用过期时间来自动清理本地存储的数据。你可以根据自己的需求，修改这段代码，设置不同的过期时间。

如何处理跨域访问本地存储的问题？

由于浏览器的同源策略，不同域名的网站不能互相访问 localStorage 和 sessionStorage 中的数据。

如果需要在不同域名的网站之间共享数据，可以使用一些跨域通信技术，例如 postMessage 或 CORS。

postMessage 是一种简单而强大的跨域通信机制。它允许一个窗口向另一个窗口发送消息，而不管它们的域名是否相同。

CORS 是一种更复杂的跨域通信机制。它需要在服务器端进行配置，允许指定的域名访问服务器的资源。

选择哪种跨域通信技术取决于你的需求。如果只需要在两个特定的域名之间共享数据，那么 postMessage 可能更简单。如果需要在多个域名之间共享数据，那么 CORS 可能更合适。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~