js 怎么实现本地存储

煙雲

发布时间：2025-08-25 14:17:01

454人浏览过

来源于php中文网

原创

选择 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 配合服务器端授权进行数据共享，具体选择依据是共享范围和系统复杂度。

js 怎么实现本地存储

在 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

中的数据。

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

Draft&Goal-Detector

检测文本是由 AI 还是人类编写的

下载

另外，应该注意防范 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.');
}

这段代码定义了两个函数：