js localstorage存取|极客笔记

js localstorage存取

1. 什么是LocalStorage？

LocalStorage是一种在浏览器中存储数据的机制，它允许将键值对存储在用户的本地浏览器中。这意味着即使用户关闭了浏览器，重新打开网页时仍然可以访问存储的数据。LocalStorage是HTML5中的一项功能，现代浏览器都支持它。

2. LocalStorage的特点

LocalStorage有以下几个特点：

永久存储：LocalStorage中的数据不会因为浏览器关闭而丢失，除非主动清除或者通过代码删除。
存储容量：LocalStorage的存储容量通常是5MB，不同的浏览器可能会略有不同。
仅支持字符串类型：LocalStorage只能存储字符串类型的数据，如果要存储其他类型的数据，需要进行字符串化。
同源限制：LocalStorage是基于同源策略的，不同网页或域名之间的LocalStorage数据是无法共享的。

3. LocalStorage的基本使用

在JavaScript中，我们可以通过localStorage对象来访问LocalStorage。localStorage对象提供了一系列方法来存储、读取和删除数据。

3.1 存储数据

要存储数据到LocalStorage中，可以使用localStorage.setItem(key, value)方法。其中，key是存储的键，value是对应的值。例如，存储一个用户名到LocalStorage中：

localStorage.setItem('username', 'John');

3.2 读取数据

要读取LocalStorage中存储的数据，可以使用localStorage.getItem(key)方法。其中，key是要读取的键。例如，读取之前存储的用户名：

let username = localStorage.getItem('username');
console.log(username);  // 输出: 'John'

3.3 删除数据

要删除LocalStorage中的数据，可以使用localStorage.removeItem(key)方法。其中，key是要删除的键。例如，删除之前存储的用户名：

localStorage.removeItem('username');

3.4 清空所有数据

要清空LocalStorage中的所有数据，可以使用localStorage.clear()方法：

localStorage.clear();

4. LocalStorage的注意事项

在使用LocalStorage时，有一些注意事项需要注意：

4.1 数据类型转换

如前所述，LocalStorage只能存储字符串类型的数据。如果要存储其他类型的数据，需要进行字符串化。例如，存储一个对象：

let user = {
  name: 'John',
  age: 20
};
localStorage.setItem('user', JSON.stringify(user));

读取时，需要进行相应的反序列化操作：

let userString = localStorage.getItem('user');
let user = JSON.parse(userString);
console.log(user);  // 输出: {name: 'John', age: 20}

4.2 存储容量限制

LocalStorage的存储容量通常是5MB，不同的浏览器可能会略有不同。如果存储超过容量限制，浏览器可能会提示用户清理LocalStorage或者禁止继续存储。

4.3 同源限制

LocalStorage是基于同源策略的，即不同网页或域名之间的LocalStorage数据是无法共享的。例如，example.com下存储的LocalStorage数据无法在example.net下访问。

4.4 隐私性

LocalStorage中的数据是存储在用户本地浏览器中的，属于客户端存储。因此，不适合存储敏感信息，以免造成隐私泄露。

5. 示例代码

下面是一个完整的示例代码，演示如何使用LocalStorage存储、读取和删除数据：

// 存储数据
localStorage.setItem('username', 'John');
localStorage.setItem('age', '25');

// 读取数据
let username = localStorage.getItem('username');
let age = localStorage.getItem('age');
console.log('Username:', username);  // 输出: 'Username: John'
console.log('Age:', age);  // 输出: 'Age: 25'

// 删除数据
localStorage.removeItem('age');

// 清空数据
localStorage.clear();