JavaScript LocalStorage API|极客教程

JavaScript LocalStorage API

在Web开发中，我们经常需要在浏览器中存储一些数据，以便在用户下次访问网站时能够快速加载之前的数据。而JavaScript提供了一个方便的本地存储解决方案，即LocalStorage API。本文将详细介绍LocalStorage API的使用方法和示例代码。

什么是LocalStorage API

LocalStorage API是HTML5提供的一种本地存储解决方案，可以让我们在浏览器中存储键值对数据。这些数据会一直保存在用户的浏览器中，即使用户关闭了浏览器也不会丢失。LocalStorage API提供了一些简单的方法来操作存储的数据，如设置数据、获取数据、删除数据等。

如何使用LocalStorage API

1. 设置数据

要设置数据到LocalStorage中，可以使用localStorage.setItem(key, value)方法。其中key是要存储的键名，value是要存储的值。

localStorage.setItem('username', 'geek-docs.com');

2. 获取数据

要获取LocalStorage中的数据，可以使用localStorage.getItem(key)方法。传入要获取的键名即可获取对应的值。

localStorage.setItem('username', 'geek-docs.com');
const username = localStorage.getItem('username');
console.log(username); // 输出: geek-docs.com

3. 删除数据

要删除LocalStorage中的数据，可以使用localStorage.removeItem(key)方法。传入要删除的键名即可删除对应的数据。

localStorage.setItem('username', 'geek-docs.com');
localStorage.removeItem('username');
const deletedUsername = localStorage.getItem('username');
console.log(deletedUsername); // 输出: null

4. 清空数据

要清空LocalStorage中的所有数据，可以使用localStorage.clear()方法。

localStorage.setItem('username', 'geek-docs.com');
localStorage.clear();

5. 存储对象

LocalStorage只能存储字符串类型的数据，如果要存储对象类型的数据，需要先将对象转换为JSON字符串，再存储到LocalStorage中。

const user = {
  name: 'Geek Docs',
  website: 'geek-docs.com'
};

localStorage.setItem('user', JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser); // 输出: { name: 'Geek Docs', website: 'geek-docs.com' }

6. 存储数组

LocalStorage也可以存储数组类型的数据，同样需要先将数组转换为JSON字符串再存储。

const colors = ['red', 'green', 'blue'];

localStorage.setItem('colors', JSON.stringify(colors));

const storedColors = JSON.parse(localStorage.getItem('colors'));
console.log(storedColors); // 输出: ['red', 'green', 'blue']

7. 检查是否支持LocalStorage

在使用LocalStorage之前，最好先检查浏览器是否支持LocalStorage。

if (typeof(Storage) !== 'undefined') {
  console.log('LocalStorage is supported');
} else {
  console.log('LocalStorage is not supported');
}

Output:

JavaScript LocalStorage API

8. 监听LocalStorage变化

可以通过window.addEventListener('storage', callback)来监听LocalStorage的变化。

window.addEventListener('storage', function(event) {
  console.log('LocalStorage changed:', event.key, event.oldValue, event.newValue);
});

localStorage.setItem('message', 'Hello, Geek Docs!');

9. 设置过期时间

LocalStorage并不支持设置过期时间，但我们可以手动实现过期时间的功能。

const setWithExpiry = (key, value, expiry) => {
  const now = new Date();
  const item = {
    value: value,
    expiry: now.getTime() + expiry
  };
  localStorage.setItem(key, JSON.stringify(item));
};

const getWithExpiry = (key) => {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) {
    return null;
  }
  const item = JSON.parse(itemStr);
  const now = new Date();
  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
};

setWithExpiry('token', 'abc123', 60000); // 设置token过期时间为1分钟
setTimeout(() => {
  const token = getWithExpiry('token');
  console.log(token); // 输出: null
}, 60000);

10. 使用LocalStorage实现简单的记事本应用

下面是一个使用LocalStorage实现的简单记事本应用的示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Notes App</title>
</head>
<body>
  <h1>Simple Notes App</h1>
  <textarea id="note" rows="10" cols="50"></textarea>
  <button id="save">Save Note</button>
  <button id="clear">Clear Note</button>
  <ul id="notes"></ul>

  <script>
    const noteInput = document.getElementById('note');
    const saveButton = document.getElementById('save');
    const clearButton = document.getElementById('clear');
    const notesList = document.getElementById('notes');

    saveButton.addEventListener('click', () => {
      const noteText = noteInput.value;
      if (noteText.trim() !== '') {
        const noteItem = document.createElement('li');
        noteItem.textContent = noteText;
        notesList.appendChild(noteItem);
        noteInput.value = '';
        localStorage.setItem(`note-${Date.now()}`, noteText);
      }
    });

    clearButton.addEventListener('click', () => {
      noteInput.value = '';
    });

    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key.startsWith('note-')) {
        const noteItem = document.createElement('li');
        noteItem.textContent = localStorage.getItem(key);
        notesList.appendChild(noteItem);
      }
    }
  </script>
</body>
</html>

Output:

JavaScript LocalStorage API