极客笔记js使用localstorage存取
在前端开发中，我们经常需要在浏览器端进行数据的存储和操作，以便后续使用。其中localStorage成为了很多开发者的首选之一。在本文中，我们将深入探讨如何使用JavaScript的localStorage在浏览器端进行数据存储和读取的相关操作。
localStorage介绍
localStorage是HTML5 Web Storage API的一部分，它可以在浏览器端本地存储数据。和cookies相比，localStorage有很多优点。例如它可以存储更大的数据、比cookies更安全、存储时不会发送到服务器等等。
localStorage是一个简单的key-value存储机制，可以将数据存储在浏览器的本地存储区域中。它可以在不同的窗口和标签页之间共享，但与服务器上的数据不同，localStorage在浏览器关闭后仍然存在。localStorage有一个很大的限制，那就是只能存储字符串类型的值。为了存储其他类型的数据，我们需要先将它们序列化或者反序列化。在本文中，我们将着重介绍如何存储和读取简单的字符串类型的数据。
存储数据
localStorage是全局变量，不需要进行初始化，直接使用即可。我们可以使用setItem方法存储数据，setItem方法接受两个参数——key和value，分别表示存储数据的键和值。下面是一个简单的示例：
localStorage.setItem("username","tom");
可以使用getItem方法来读取存储的数据，getItem方法接受一个参数——key，表示要读取的数据的键。下面是一个简单的读取示例：
var username = localStorage.getItem("username");
console.log(username); // "tom"
如果尝试设置LocalStorage的值为 undefined、NaN 和 Infinity时，本身不报错，但这些值在存储的过程中会变成字符串”undefined”、”NaN”和”Infinity”。因此在存储的时候需要进行特别的注意。
删除数据
使用removeItem方法可以删除特定的存储项，该方法接收一个参数——key，表示要删除的存储项对应的键。下面是一个简单的示例：
localStorage.removeItem("username");
如果我们想要删除所有的localStorage存储项，可以使用clear方法。这个方法不接受任何参数，调用它会清空整个LocalStorage。下面是一个简单的示例：
localStorage.clear();
localStorage事件
localStorage修改时，可以通过监听storage事件来进行一些操作。storage事件发生在LocalStorage存储区域发生改变时，例如setItem或removeItem方法被调用时。
storage事件是window对象的一个事件，我们可以使用addEventListener方法来监听本地存储内发生的变化。这个事件一般被添加到window上，所以所有打开的窗口和标签页都可以接受相同的事件，并且这两个窗口之间共享localStorage存储区域。
我们可以使用事件的key、newValue和oldValue属性来获取发生变化的信息。下面是一个简单的示例：
window.addEventListener('storage', function(event) {
console.log('storage event');
console.log('key: ' + event.key);
console.log('oldValue: ' + event.oldValue);
console.log('newValue: ' + event.newValue);
console.log('url: ' + event.url);
});
限制
由于某些浏览器的限制，LocalStorage有一些重要的限制，我们在使用时需要特别注意：
- 每个源（源就是指当前页面的协议，主机和端口）的LocalStorage大小限制为5-10MB不等。
- Web Storage不支持IE7及以下版本的浏览器## 结论
通过本文的介绍，我们了解到如何使用JavaScript的localStorage在浏览器端进行数据存储和读取的相关操作，以及localStorage的事件和限制。LocalStorage是一个非常方便的工具，可以用于保存用户的偏好设置、表单数据等，在开发中使用LocalStorage可以方便的存储和读取数据，提高用户体验。然而，在使用LocalStorage时需要特别注意它的限制，以及在存储、读取和删除数据过程中的错误处理。