ES12：使用 Web Storage API 存储和检索数据-JavaScript中文网-JavaScript教程资源分享门户

Web Storage API 是一组浏览器 API，可以让开发者在浏览器中存储和检索数据。它有两种方式：localStorage 和 sessionStorage。localStorage 可以在浏览器关闭后仍然保存数据，而 sessionStorage 则只能在当前窗口或标签页中保存数据。

在 ES12 中，Web Storage API 也有了新的特性。本文将介绍如何使用 Web Storage API 存储和检索数据，包括 ES12 中新增的特性，同时也会提供示例代码，帮助读者更好地理解和学习。

存储数据

在 Web Storage API 中，我们可以使用 setItem() 方法来存储数据。该方法接收两个参数，第一个参数是要保存的键（key），第二个参数是要保存的值（value）。

// 存储数据到 localStorage
localStorage.setItem('name', 'Jack');

如果我们要存储一个对象，则需要使用 JSON.stringify() 方法将其转换为字符串。

// 存储对象到 localStorage
const user = { name: 'Jack', age: 20 };
localStorage.setItem('user', JSON.stringify(user));

检索数据

使用 getItem() 方法可以检索存储在 Web Storage 中的数据。

// 从 localStorage 中检索数据
const name = localStorage.getItem('name');
console.log(name); // Jack

同样，如果存储的是对象，需要使用 JSON.parse() 方法将字符串转换成对象。

// 从 localStorage 中检索对象
const userStr = localStorage.getItem('user');
const user = JSON.parse(userStr);
console.log(user); // { name: 'Jack', age: 20 }

删除数据

可以使用 removeItem() 方法来删除存储在 Web Storage 中的数据。

// 从 localStorage 中删除数据
localStorage.removeItem('name');

清除所有数据

可以使用 clear() 方法来清除存储在 Web Storage 中的所有数据。

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

新增特性

在 ES12 中，Web Storage API 标准新增了一个方法：storage.writable。

该方法用来判断 Web Storage 是否可以被写入。如果返回 true，则表示可以写入；如果返回 false，则表示不可写入。

// 判断是否可写入
if (localStorage.writable) {
  // 可以写入数据
  localStorage.setItem('name', 'Jack');
} else {
  // 无法写入数据
  console.log('Web Storage 不可写入');
}

总结

Web Storage API 是一个很有用的浏览器 API，可以让我们方便地在浏览器中存储和检索数据。在 ES12 中，Web Storage API 还新增了一个判断 Web Storage 是否可写入的方法，可以更好地帮助开发者判断当前环境是否支持 Web Storage。

在使用 Web Storage API 时，我们应该遵循以下几个原则：

不要存储敏感数据。因为 Web Storage 中的数据可以被恶意网站和浏览器插件窃取。
不要存储过多数据。因为存储在 Web Storage 中的数据会占用浏览器的存储空间，可能导致浏览器的性能下降。
在存储对象时，需要使用 JSON.stringify() 和 JSON.parse() 方法进行转换。

我们应该谨慎使用 Web Storage API，尽可能地减少存储数据的数量和敏感程度，以保证浏览器的安全性和性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/665223f2d3423812e467eab9