JS浏览器本地存储store.js介绍及应用

简介

浏览器本地存储是前端开发中常用的技术之一，通过它，我们可以将数据存储在用户本地而不是服务器上，从而实现更快的读写性能，以及离线使用。store.js就是一个用于简化本地存储操作的轻量级JavaScript库。

安装

store.js可以直接通过CDN引入，也可以使用npm进行安装。

通过CDN引入:

<script src="https://unpkg.com/store/dist/store.legacy.min.js"></script>

使用npm安装:

npm install store.js --save

使用

store.js为我们提供了四个方法：set、get、remove和clear。让我们一一来了解它们。

set

set用于设置一个本地存储数据项，接受两个参数：键（key）和值（value）。store.js支持存储字符串、数字、布尔值、对象和数组等类型数据。

store.set('name', 'John');
store.set('age', 30);

get

get用于获取本地存储数据项，接受一个参数：键（key），返回对应的值。

console.log(store.get('name')); // 'John'
console.log(store.get('age')); // 30

remove

remove用于删除指定的本地存储数据项，接受一个参数：键（key）。

store.remove('age');
console.log(store.get('age')); // undefined

clear

clear用于清空所有本地存储数据项。

store.clear();
console.log(store.get('name')); // undefined

示例一

下面是一个例子，展示了如何将用户输入的个人信息保存到本地存储中，并在下一次打开页面时自动恢复。

<!DOCTYPE html>
<html>
<head>
  <title>Store.js Example</title>
  <script src="https://unpkg.com/store/dist/store.legacy.min.js"></script>
</head>
<body>
  <label>
    Name:
    <input type="text" id="name" />
  </label>
  <label>
    Email:
    <input type="email" id="email" />
  </label>
  <button onclick="save()">Save</button>
  <button onclick="clearStorage()">Clear</button>

  <script>
    function save() {
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      store.set('name', name);
      store.set('email', email);
      alert('Saved.');
    }

    function clearStorage() {
      store.clear();
      alert('Cleared.');
    }

    const name = store.get('name');
    const email = store.get('email');
    if (name) {
      document.getElementById('name').value = name;
      document.getElementById('email').value = email;
    }
  </script>
</body>
</html>

示例二

下面是一个例子，展示了如何在不支持localStorage的浏览器中使用store.js。

<!DOCTYPE html>
<html>
<head>
  <title>Store.js Example</title>
  <script src="https://unpkg.com/store/dist/store.legacy.min.js"></script>
</head>
<body>
  <p>Your name is <span id="name"></span>.</p>

  <script>
    store.set('name', 'John');
    document.getElementById('name').textContent = store.get('name');
  </script>
</body>
</html>