HTML5引入了两种Web存储机制,用于在客户端(浏览器)中存储数据。这两种机制分别是:

1. localStorage:
   - localStorage 允许在浏览器中存储键/值对,并在同一域名下的页面之间进行共享。存储的数据在浏览器关闭后仍然保留,直到用户手动清除浏览器缓存或通过JavaScript代码删除。
   // 存储数据
   localStorage.setItem('username', 'John');

   // 获取数据
   var username = localStorage.getItem('username');

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

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

2. sessionStorage:
   - sessionStorage 与 localStorage 类似,但是存储的数据在用户关闭浏览器标签或窗口后会被清除。因此,sessionStorage 用于临时会话数据的存储。
   // 存储数据
   sessionStorage.setItem('theme', 'light');

   // 获取数据
   var theme = sessionStorage.getItem('theme');

   // 删除数据
   sessionStorage.removeItem('theme');

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

这两种存储机制使用简单,但需要注意的是存储在其中的数据是以字符串形式存储的。如果需要存储复杂的对象,可以使用 JSON.stringify 将对象转换为字符串进行存储,然后使用 JSON.parse 进行检索时的解析。
// 存储对象
var user = { name: 'John', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 获取对象
var storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name);  // 输出: John

请注意,由于存储在本地的数据可以被JavaScript代码访问,因此不应该将敏感信息存储在 localStorage 或 sessionStorage 中。对于敏感信息,应该在服务器端进行处理。


转载请注明出处:http://www.zyzy.cn/article/detail/3679/HTML5