详解H5本地储存Web Storage

Web Storage 是HTML5引入的前端本地储存技术之一。通过Web Storage，我们可以在浏览器端储存一些键值对的数据。以下是本文的目录：

1. 什么是Web Storage
2. Web Storage 的使用方式
3. 区别LocalStorage和SessionStorage
4. 示例代码1：简单的Web Storage 使用
5. 示例代码2：使用JSON序列化储存复杂数据

1. 什么是Web Storage

Web Storage是一种HTML5 API技术，它可以在浏览器本地储存一些键值对的数据，用于解决Cookie存在的一些问题（如容量限制、为每个资源发送HTTP请求等）。Web Storage 分为两类：LocalStorage 和 SessionStorage。

2. Web Storage 的使用方式

使用Web Storage 非常简单，我们可以使用JavaScript中的 localStorage和sessionStorage对象来实现。其中 localStorage 和 sessionStorage 对象的API接口相同，这里以localStorage为例：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

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

以上是一些基本的Web Storage API接口，其他接口可以参考MDN文档。

3. 区别LocalStorage和SessionStorage

LocalStorage 和 SessionStorage 的区别在于数据的生命周期和作用域。LocalStorage 数据的生命周期为永久，即除非用户手动删除或代码清除，否则数据将一直存在。 而 SessionStorage 数据在会话结束后会被删除。

LocalStorage 和 SessionStorage 的作用域也有区别，LocalStorage 存储的数据在同源的所有窗口和iframe中共享，而 SessionStorage 仅在存储数据的页面本身的窗口和iframe中可用。

4. 示例代码1：简单的Web Storage 使用

以下是一个简单实例，展示如何使用localStorage：

// 存储一个数据
localStorage.setItem('username', 'Alice');

// 获取一个数据
const username = localStorage.getItem('username');
console.log(username); // Alice，输出存储的数据

// 删除一个数据
localStorage.removeItem('username');

// 检测一个数据是否存在
if (localStorage.getItem('username')) {
  console.log('存在用户名数据');
} else {
  console.log('不存在用户名数据');
}

以上是一个简单的 localStorage 示例，可以运行在大多数现代浏览器上，只要开启JavaScript即可。

5. 示例代码2：使用JSON序列化储存复杂数据

localStorage 默认储存的数据格式只能是字符串，但是我们可以通过JSON.stringify()和 JSON.parse()方法，来序列化和反序列化复杂数据类型，并使用localStorage存储。

以下是一个示例，我们在localStorage中存储一个对象：

// 存储一个对象
const data = { name: 'Alice', age: 18 };
localStorage.setItem('data', JSON.stringify(data));

// 获取数据
const localData = localStorage.getItem('data');
console.log(JSON.parse(localData)); // { name: 'Alice', age: 18 }

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

以上是一个使用JSON序列化和反序列化储存对象到localStorage的代码片段，适用于存储复杂的自定义数据类型。

结论

以上是Web Storage 的完整攻略，通过使用localStorage和sessionStorageAPI，我们可以在浏览器中储存简单和复杂数据类型。为了确保数据的安全性，我们建议使用特定的后端持久化，如数据库存储，来替代浏览器端储存，在一定程度上避免Web Storage的安全隐患。