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

相关推荐
蜗牛快跑21311 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy12 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js