一、使用
// 存储数据
localStorage.setItem('key', 'value');
// 检索数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();
二、注意事项
1.localStorage只能存储字符串类型的数据。如果存储其他类型的数据,需要转换为字符串类型。
2.localStorage的存储容量是有限的。每个浏览器都有自己的存储限制,通常为5-10MB。如果存储超过存储限制的数据,会抛出异常。
3.localStorage的数据仅限于当前域名和协议。如果需要在多个域名之间共享数据,可以考虑使用sessionStorage、Cookie或服务器端存储。
4.localStorage存储的数据是永久的,浏览器关闭或计算机重启存储的数据也会一直存在。需要小心使用localStorage,确保不会意外泄露敏感信息或占用过多的存储空间。
三、与sessionStorage区别
生命周期:
localStorage中存储的数据是永久性的。
sessionStorage中存储的数据只在当前会话中存在。用户关闭浏览器窗口或标签页时,sessionStorage中的数据将被清除。
可访问性:
localStorage中存储的数据可以在同一域名下的任何页面中访问,包括在不同的窗口或标签页中。
sessionStorage中存储的数据只能在同一窗口或标签页中访问。在不同的窗口或标签页中打开同一页面的话,每个窗口或标签页都有自己的sessionStorage实例,之间的数据是不共享的。
四、监听变量
localStorage提供了storage事件,用于监听localStorage中的数据变化。
当存储在localStorage中的数据发生变化时会触发storage。
例如:
// 添加事件监听器
window.addEventListener('storage', function(event) {
if (event.key === 'myKey') {
console.log('myKey的值已经被修改为:' + event.newValue);
}
});
storage事件只会在其他窗口或标签页对localStorage进行更改时才会触发。如果当前窗口或标签页更改了localStorage中的数据,storage事件将不会触发。
因此,如果要监听localStorage当前页面的数据:
使用一个变量来存储需要在localStorage中存储和检索的数据。更改此变量的时候同步更新localStorage中的对应键值对。
或者
添加一个定时器,定期检查localStorage中存储的数据是否变化。
例如:
// 存储数据
localStorage.setItem('myKey', 'myValue');
// 检查localStorage中的数据变化
const checkLocalStorage = () => {
const value = localStorage.getItem('myKey');
if (value !== myVariable) {
console.log('myVariable的值已经被修改为:' + value);
myVariable = value;
}
setTimeout(checkLocalStorage, 1000);
};
// 初始化变量
let myVariable = localStorage.getItem('myKey');
// 启动定时器
checkLocalStorage();