localStorage 本地缓存

localStorage 是一种在客户端(通常是浏览器)存储数据的方式,它允许网站存储数据在用户的计算机上,并且这些数据可以在浏览器关闭后仍然保留。它非常适合存储一些用户偏好设置、表单数据、以及其他需要在用户下次访问时保留的信息。

基本用法

存储数据

你可以使用 localStorage.setItem(key, value) 方法来存储数据。其中 key 是数据的名称,value 是要存储的数据值(通常是一个字符串,但也可以是其他类型的数据,存储时会转换为字符串)。

javascript 复制代码
localStorage.setItem('username', 'JohnDoe');
获取数据

使用 localStorage.getItem(key) 方法可以获取之前存储的数据。

javascript 复制代码
let username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe
移除数据

使用 localStorage.removeItem(key) 方法可以移除存储的数据。

javascript 复制代码
localStorage.removeItem('username');
清除所有数据

使用 localStorage.clear() 方法可以清除 localStorage 中的所有数据。

javascript 复制代码
localStorage.clear();

存储复杂数据类型

由于 localStorage 只能存储字符串,当你需要存储复杂数据类型(如对象或数组)时,你需要先将它们转换为字符串(通常使用 JSON.stringify()),然后在读取时再将字符串转换回原始数据类型(使用 JSON.parse())。

存储对象
javascript 复制代码
let user = { name: 'JohnDoe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
获取对象
javascript 复制代码
let userStr = localStorage.getItem('user');
let userObj = JSON.parse(userStr);
console.log(userObj.name); // 输出: JohnDoe

注意事项

  1. 存储限制 :不同的浏览器对 localStorage 的存储大小有不同的限制,通常在 5MB 到 10MB 之间。
  2. 同源策略localStorage 数据只能由创建它的同源(即相同的协议、域名和端口)访问。
  3. 数据安全性localStorage 数据不是加密的,因此不要在其中存储敏感信息(如密码)。
  4. 持久性localStorage 数据会一直保留,直到用户手动清除(通过浏览器设置或调用 localStorage.clear())。

示例

下面是一个简单的示例,演示如何使用 localStorage 存储和获取用户登录状态:

javascript 复制代码
// 存储用户登录状态
function setLoginStatus(isLoggedIn) {
    localStorage.setItem('isLoggedIn', isLoggedIn.toString());
}

// 获取用户登录状态
function getLoginStatus() {
    return localStorage.getItem('isLoggedIn') === 'true';
}

// 示例使用
setLoginStatus(true);
console.log(getLoginStatus()); // 输出: true

通过使用 localStorage,你可以轻松地在客户端存储和检索数据,从而提供更好的用户体验。

相关推荐
程序视点1 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile1 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年1 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神1 小时前
coze娱乐ai换脸
前端
GIS之路2 小时前
GeoTools 开发合集(全)
前端
咖啡の猫2 小时前
Shell脚本-嵌套循环应用案例
前端·chrome
一点一木2 小时前
使用现代 <img> 元素实现完美图片效果(2025 深度实战版)
前端·css·html
萌萌哒草头将军2 小时前
🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
前端·vite·trae
布列瑟农的星空2 小时前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
yvvvy3 小时前
前端必懂的 Cache 缓存机制详解
前端