当前位置：首页 > news >正文

网络Web存储之LocalStorage

news 来源：原创 2025/6/8 16:44:17

文章目录

LocalStorage介绍
- 定义
- 特点
- 兼容性
- 常用方法
- - 存值
  - 取值
  - 删除指定键值对
  - 清空所有键值对
  - 通过索引获取键名
  - 获取所有值
  - 判断是否含有某个键（key）
  - 拓展
  - - 遍历得到key
    - 存储和读取复杂类型的数据
- 应用场景

LocalStorage介绍

定义

LocalStorage 是HTML5提供的一种客户端存储机制，属于Web存储API的一部分。它允许网页在用户的浏览器中存储键值对数据，这些数据会以持久化的方式保存，除非用户手动清除浏览器缓存，或者通过 JavaScript代码进行删除操作，否则数据将一直存储在用户的本地浏览器中。

从技术角度来看，LocalStorage 是 window 对象的一个属性，是一个存储对象，它提供了一些简单的方法来操作存储的数据，如 setItem、getItem、removeItem 和 clear 等，以实现数据的存储、读取、删除和清除所有数据的功能。

特点

持久性: LocalStorage存储的数据是永久的，除非用户主动清楚浏览器缓存或使用JavaScript代码删除，否则数据将一直保留在浏览器中。
同源策略: 遵循同源策略，即不同源的页面无法访问彼此的LocalStorage数据，这里的同源指的是协议、域名和端口都相同。
容量较大: 一般来说，浏览器对 LocalStorage 的存储空间限制相对较大，通常可以达到 5MB 甚至更多，具体大小因浏览器而异。
简单易用: 提供了简单的 API，方便开发者进行数据的存储、读取和删除操作。
与服务器无关: 数据存储在本地浏览器，不需要与服务器进行交互，读取数据时可以直接从本地获取，提高了数据访问的速度，减轻了服务器的负担。

兼容性

LocalStorage 在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari、Edge 等。然而，在一些旧版本的浏览器或某些特殊环境下，可能存在兼容性问题。在使用 LocalStorage 时，可以通过检测window.localStorage是否存在来判断浏览器是否支持 LocalStorage。例如：

if(typeof window.localStorage !== 'undefined') {//浏览器支持LocalStorage，，可以进行相关操作
} else {//浏览器不支持LocalStorage，给出提示或其他替代方案console.log("浏览器不支持LocalStorage");
}

常用方法

存值

存值方式一共有三种。

localStorage.setItem(key,value);
localStorage[key] = value
localStorage.key = value

用于将键值对存储到 LocalStorage 中。如果键已经存在，则更新其对应的值；如果键不存在，则创建一个新的键值对。注意：键和值的格式。例如：

//存储值
//第一种方式
localStorage.setItem('name', 'John');
//第二种方式
localStorage['name'] = 'john';
//第三种方式 第三种键值格式与前两种有差别
localStorage.name = 'john';
//更新
localStorage.setItem('name','sam');
//其他两种同样

取值

取值方式与存值方式类似，也有三种。

localStorage.getItem(key)
localStorage[key]
localStorage.key

根据指定的键获取对应的值。如果键不存在，则返回null。

//取值
//第一种方式
localStorage.getItem('name');
//第二种方式
localStorage['name'];
//第三种方式 第三种键值格式与前两种有差别
localStorage.name;

删除指定键值对

localStorage.removeItem(key)

用于删除指定键的键值对。例如：

//删除键值为name的键值对
localStorage.removeItem('name');

清空所有键值对

localStorage.clear()

用于删除所有键值对。

通过索引获取键名

localStorage.key(index)

用于获取指定索引位置的键名。索引从 0 开始。例如：

localStorage.key(0);
//获取索引为0的键名
//返回值为键名

获取所有值

`localStorage.valueOf()

取出所有的值，返回一个对象。

localStorage.valueOf();
//返回值 例如；
/**   {*   	name:'john',*	 	age:'22'*		...*		}/

判断是否含有某个键（key）

localStorage.hasOwnProperty(key)

判断是否含有某个键（key）,如果有返回true，没有则返回false

localStorage.hasOwnProperty('name');

拓展

遍历得到key

可以使用for循环、 for...in 循环或 Object.keys() 方法来遍历 LocalStorage 中的所有键值对。

//for
for(let i = 0;i<localStorage.length;i++){//打印键console.log(localStorage.key(i));//打印值console.log(localStorage.getItem(localStorage.key(i)));
}//for in for(let key in localStorage) {if(localStorage.hasOwnPreperty(key)) {let value = localStorage.getItem(key);console.log(`${key}: ${value}`);}
}//使用Object.keys() 方法遍历
let keys = Object.keys(localStorage);
for(let key of keys) {let value = localStorage.getItem(key);console.log(`${key}: ${value}`);
}

存储和读取复杂类型的数据

LocalStorage只能存储字符串类型的数据，但是可以存储JSON格式的数据，将复杂类型的数据通过JSON.stringify()转换为JSON字符串进行存储，读取时使用JSON.parse()还原。

在实际应用中，LocalStorage 可以用于存储一些用户偏好信息（如页面主题、字体大小）、表单数据（如自动保存用户未完成的表单输入）、缓存一些不经常更新的数据等，以提高用户体验和网站性能。但需要注意的是，由于存储的数据是明文的，不建议存储敏感信息，且存储容量有限，需要合理使用。

下面是一个存储和读取复杂对象的操作：

let user = {name:"Alice",age:20,hobbies:['reading','swimming'];
}
//存储对象，将对象转换为JSON字符串
localStorage.setItem('user',JSON.stringify(user));//读取对象，将存储于的JSON字符串转换为对象let storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser);
//输出: { name: 'Alice', age: 30, hobbies: ['reading','swimming'] }

应用场景

用户偏好设置：可以存储用户在网站上的个性化设置，如主题颜色、字体大小、语言偏好等。当用户下次访问网站时，直接从 LocalStorage 中读取这些设置，为用户提供一致的个性化体验。
缓存数据：对于一些不经常变化且需要频繁访问的数据，如网站的静态资源路径、一些基础配置信息等，可以将其存储在 LocalStorage 中。这样在页面加载时，可以直接从本地获取数据，减少服务器请求，提高页面加载速度。
离线应用：在一些离线应用中，LocalStorage 可以用于存储应用所需的数据。例如，离线阅读应用可以将用户下载的书籍内容存储在 LocalStorage 中，以便用户在没有网络的情况下也能阅读。
表单数据存储：当用户在填写表单时，如果因为某些原因需要暂停操作，下次打开页面时可以从 LocalStorage 中读取之前填写的数据并自动填充，避免用户重复输入。