HTML5的本地存储功能怎样使用

HTML5 提供了两种本地存储功能：localStorage 和 sessionStorage。这两种方法都允许在用户的浏览器上存储键值对数据，以便在页面刷新或关闭后仍然可以访问这些数据。localStorage 数据没有过期时间，而 sessionStorage 数据在页面会话结束时会被清除。

以下是如何使用 localStorage 和 sessionStorage 的示例：

1. 存储数据：

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

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

2. 读取数据：

// 从 localStorage 读取数据
var data = localStorage.getItem('key');

// 从 sessionStorage 读取数据
var data = sessionStorage.getItem('key');

3. 删除数据：

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

// 删除 sessionStorage 中的数据
sessionStorage.removeItem('key');

4. 清空所有数据：

// 清空 localStorage 中的所有数据
localStorage.clear();

// 清空 sessionStorage 中的所有数据
sessionStorage.clear();

5. 检查某个键是否存在：

// 检查 localStorage 中是否存在某个键
var exists = 'key' in localStorage;

// 检查 sessionStorage 中是否存在某个键
var exists = 'key' in sessionStorage;

注意：localStorage 和 sessionStorage 只能存储字符串类型的数据。如果你需要存储对象或数组，可以先将其转换为 JSON 字符串，然后在读取时再将其解析为对象或数组。

// 存储对象到 localStorage
var obj = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(obj));

// 从 localStorage 读取对象
var user = JSON.parse(localStorage.getItem('user'));

// 存储数组到 sessionStorage
var arr = [1, 2, 3, 4, 5];
sessionStorage.setItem('numbers', JSON.stringify(arr));

// 从 sessionStorage 读取数组
var numbers = JSON.parse(sessionStorage.getItem('numbers'));