JavaScript localStorage

简介

localStorage是HTML5提供的存储API之一，它可以在客户端存储键值对，并且可以长期保存不会因为浏览器关闭而失效。它的大小约为5-10MB。

使用方法

1. 存储数据：调用localStorage对象的setitem()方法

   localStorage.setItem(key, value);
   

   其中key是要存储的键名，value是要存储的值。

2. 读取数据：调用localStorage对象的getItem()方法

   localStorage.getItem(key);
   

   其中key是你要读取的键名。

3. 移除某一数据：调用localStorage对象的removeItem()方法

   localStorage.removeItem(key);
   

   其中key是你要移除的键名。

4. 移除所有数据：调用localStorage对象的clear()方法

   localStorage.clear();
   

注意事项

• localStorage保存的数据只能是字符串类型，如果要存储对象需先将其转换为字符串再存储，读取数据时再将其转换为原来的对象。
• localStorage只能存储ASCII码字符，如果要存储非ASCII码字符需先将其编码再存储，读取数据时再将其解码。
• localStorage只在同一域名下的页面间共享，不同域名下的页面无法共享。
• localStorage的大小限制为5-10MB，不同浏览器实现的大小可能有所不同。

实例应用 - 记录用户偏好

以下代码片段展示了如何使用localStorage记录用户的偏好，这里以记录字体颜色和背景色为例。

const colorBtns = document.querySelectorAll('.color');
const bgBtns = document.querySelectorAll('.bg');

// 绑定字体颜色和背景颜色的按钮点击事件
colorBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 保存选中的字体颜色
    const color = btn.getAttribute('data-color');
    localStorage.setItem('prefColor', color);
  });
});

bgBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 保存选中的背景颜色
    const bg = btn.getAttribute('data-bg');
    localStorage.setItem('prefBg', bg);
  });
});

// 初始化用户偏好
const initPref = () => {
  // 获取保存的字体颜色和背景颜色
  const color = localStorage.getItem('prefColor');
  const bg = localStorage.getItem('prefBg');

  // 如果存在则设置为用户偏好的颜色
  if (color) {
    document.body.style.color = color;
  }
  if (bg) {
    document.body.style.backgroundColor = bg;
  }
};

initPref();

在上述代码中，我们首先获取了字体颜色和背景颜色的按钮，并为它们绑定了点击事件。当用户点击某一个字体颜色和背景颜色的按钮时，我们就将选中的颜色值存储到localStorage中。

在页面刷新时，我们读取保存的字体颜色和背景颜色，如果存在则设置为用户偏好的颜色。这样用户再次访问页面时，他们的偏好设置仍然能够保留。