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,你可以轻松地在客户端存储和检索数据,从而提供更好的用户体验。

相关推荐
zhangjr057526 分钟前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱38 分钟前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态1 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚1 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...2 小时前
web钩子什么意思
前端·网络
啵咿傲2 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy2 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html