简介

在现代Web开发中，存储和管理数据是至关重要的任务。为了满足不同的需求，开发人员可以选择使用Cookie、Web Storage和IndexedDB等不同的技术。

Cookie是最古老的一种机制。它是存储在用户浏览器中的小型文本文件，可以在浏览器和服务器之间传递。Cookie主要用于维持状态，通过携带用户信息来识别客户端，但它的存储容量较小且有一定的限制。

Web Storage是HTML5新增的一项技术，包括localStorage和sessionStorage两种机制。它们提供了更大的存储容量，并且数据可以在浏览器关闭后仍然保留。localStorage提供持久化存储，而sessionStorage只在会话期间有效。

IndexedDB是一种高级的Web API，可以提供更强大的本地数据库存储能力。它允许开发人员使用索引来高效地存储和检索大量结构化数据。IndexedDB适用于需要离线访问或处理复杂数据需求的应用程序。

在选择适合的存储技术时，开发人员需要根据具体需求来进行权衡。如果只需要简单的状态维护，Cookie可能足够。如果需要存储较大量的数据，并且需要在会话期间保持数据，Web Storage是一个不错的选择。而对于复杂的数据操作或离线访问需求，IndexedDB可以提供更好的解决方案。

所以他们对不同应用场景有不同的作用

应用

我们先来说说cookie吧

在早期的Web开发中，人们面临一个问题：HTTP协议是无状态的，服务器仅接收请求和返回响应，不记录客户端信息。那么如何确保下次请求时服务器能识别用户呢？

答案即是标题： cookie

Cookie实质上是浏览器中的一小段文本文件，附加在HTTP请求中，在浏览器和服务器之间传递。它能携带用户信息，当服务器检查Cookie时，就能获取客户端的状态。然而，Cookie的主要职责并非本地存储，而是维持状态的重要角色.

那么，它又是如何使用和维持状态的呢？

Cookie的主要职责是维持状态而不是本地存储。它通过以下方式使用和维持状态：

创建和发送Cookie：当用户访问一个网站时，服务器可以在HTTP响应头中包含一个Set-Cookie头部，这个头部会告诉浏览器创建一个新的Cookie。Cookie通常包含一些关于用户的信息，例如用户ID、登录凭证等。
存储在浏览器中：一旦在响应中收到Set-Cookie头部，浏览器会将Cookie存储在用户的本地计算机上。每个浏览器都有一个Cookie存储区域，用于存储网站发送的Cookie。
发送Cookie到服务器：当用户浏览同一网站的其他页面时，浏览器会自动将与该网站关联的Cookie附加在每个后续的请求中。这使得浏览器能够将用户的状态信息发送回服务器，以便服务器能够识别用户并提供特定于用户的响应。
服务器检查和利用Cookie：服务器在接收到由浏览器发送的请求时，会检查请求中的Cookie。通过解析Cookie中的信息，服务器能够获取客户端的状态和身份，并根据这些信息做出相应的响应和处理。
更新和删除Cookie：服务器可以通过在响应中包含新的Set-Cookie头部来更新已经存在的Cookie。这样可以修改Cookie中的信息或者更新其过期时间等。同样地，服务器也可以发送一个过期日期已经过去的Cookie，以告知浏览器删除该Cookie。

通过以上的方式，Cookie能够扮演维持状态的重要角色。它允许服务器通过存储在浏览器中的Cookie来识别和记录用户的状态，并在用户浏览网站的不同页面时维持一致的用户体验和操作状态。

至于代码层面：

有许多JavaScript库可用于更方便地操作Cookie。以下是一些常见的Cookie库：

这是一个简单且轻量级的Cookie库，可以轻松地读取、设置和删除Cookie。它具有简洁的API和良好的浏览器兼容性。

官方网站: github.com/js-cookie/j...

示例用法：

javascript 复制代码

// 设置Cookie
Cookies.set('username', 'John', { expires: 7 });

// 读取Cookie
var username = Cookies.get('username');

// 删除Cookie
Cookies.remove('username');

这是一个通用的Cookie库，可以在浏览器和服务器端（如Node.js）同时使用。它提供了一致的API，以便在不同环境中处理Cookie。

官方网站: github.com/reactivesta...

示例用法：

javascript 复制代码

// 设置Cookie
const cookies = new Cookies();
cookies.set('username', 'John', { path: '/', expires: 7 });

// 读取Cookie
var username = cookies.get('username');

// 删除Cookie
cookies.remove('username');

这些库的使用和操作方法都相对简单，并提供了许多额外的功能，例如设置路径、过期时间、安全标志等。使用这些库可以使Cookie操作更加方便和可靠，并且提供了更大的灵活性和兼容性。请根据自己的项目需求选择适合的库进行操作。

localStorage 和 sessionStorage

接下来，就说说localStorage 和 sessionStorage，也是cookie所不具备的。因为cookie 的使用受到种种限制，最关键的就是存储容量太小和数据无法持久化存储。

上面的图标，已经很简洁地描述了他们的区别。

比如，如下一个场景：我希望浏览器在登录新用户，第一次的时候弹出引导，之后用户每次登录进该网站，不需要再弹引导，这个时候我们选什么做存储呢？

localStorage: localStorage是HTML5提供的一种在浏览器中存储数据的方式。它可以将数据永久性地存储在用户的浏览器中，即使关闭浏览器或重新启动计算机，数据也仍然存在。

示例用法：

javascript 复制代码

// 检查localStorage中是否存在"firstTimeLogin"项
if (!localStorage.getItem("firstTimeLogin")) {
  // 显示引导弹窗
  showGuidePopup();

  // 设置"firstTimeLogin"项为true，表示用户已经登录过一次
  localStorage.setItem("firstTimeLogin", true);
}

sessionStorage: sessionStorage也是HTML5提供的一种在浏览器中存储数据的方式，但与localStorage不同的是，sessionStorage中的数据会在用户关闭浏览器标签页时被清除。

示例用法：

javascript 复制代码

// 检查sessionStorage中是否存在"firstTimeLogin"项
if (!sessionStorage.getItem("firstTimeLogin")) {
  // 显示引导弹窗
  showGuidePopup();

  // 设置"firstTimeLogin"项为true，表示用户已经登录过一次
  sessionStorage.setItem("firstTimeLogin", true);
}

在上述示例中，我们首先检查存储中是否存在特定的"firstTimeLogin"项。如果不存在，则显示引导弹窗，并将"firstTimeLogin"项设置为true，以便在用户的下一次登录时不再显示引导。这样，用户只有在首次登录时会看到引导弹窗。

您可以根据具体需求选择使用localStorage或sessionStorage。如果您希望引导仅出现在用户当前浏览会话中，而不是每次登录都弹出引导，则使用sessionStorage会更适合。而如果您希望引导能够在用户多个浏览会话中保持一致的状态，即使用户重新打开浏览器后仍然不再弹出引导，则使用localStorage会更适合。请根据您的具体应用场景进行选择。

IndexedDB

（索引数据库）是浏览器提供的一种客户端数据库，用于存储大量的结构化数据。它在浏览器中提供了一种持久性存储数据的方式，可以在离线状态下进行读写操作，并提供了强大的索引和事务支持。

使用场景：

离线应用程序：IndexedDB适用于需要在离线状态下存储和访问数据的应用程序。由于数据存储在本地，即使断开网络连接，用户仍然可以继续使用应用程序，并在重新连接时进行数据同步。
大量数据存储：IndexedDB可以处理大量的结构化数据，适用于需要存储或缓存大量数据的应用程序，如电子邮件客户端、笔记应用程序等。
高性能查询：由于IndexedDB支持通过各种索引进行高性能的数据查询，因此适用于需要频繁查询数据的应用程序。

使用方式：

打开和关闭数据库：使用indexedDB.open()方法打开或创建一个数据库。通过监听onsuccess事件可以获取到数据库对象，然后可以使用database.close()方法关闭数据库。
创建和管理对象存储空间：使用database.createObjectStore()方法可以创建一个对象存储空间，用于存储数据。可以指定主键和索引，以便快速检索数据。
读写数据：使用事务来读取和写入数据。可以使用transaction.objectStore(objectStoreName)方法获取对象存储空间，并使用add()、put()、get()等方法来操作数据。
索引和查询：可以创建索引来优化查询操作。使用objectStore.createIndex()方法创建索引，然后可以使用index.get()、index.getAll()等方法进行查询。

如下：

html 复制代码

<template>
  <div>
    <h2>User List</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }} - {{ user.name }} (Age: {{ user.age }})
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'UserList',
  setup() {
    const users = ref([]);

    onMounted(() => {
      // 打开或创建数据库
      const request = indexedDB.open('UserDB', 1);

      request.onupgradeneeded = function(event) {
        const db = event.target.result;

        // 创建对象存储空间
        if (!db.objectStoreNames.contains('users')) {
          const objectStore = db.createObjectStore('users', { keyPath: 'id' });

          // 创建索引
          objectStore.createIndex('username', 'username', { unique: true });
        }
      };

      request.onsuccess = function(event) {
        const db = event.target.result;

        // 查询用户数据
        const transaction = db.transaction(['users'], 'readonly');
        const objectStore = transaction.objectStore('users');

        const getAllRequest = objectStore.getAll();

        getAllRequest.onsuccess = function(event) {
          const usersData = event.target.result;
          users.value = usersData;
        };
      };

      request.onerror = function(event) {
        console.error('Database error:', event.target.error);
      };
    });

    return { users };
  },
};
</script>

在onMounted生命周期钩子中，我们打开或创建了名为"UserDB"的IndexedDB数据库。在onupgradeneeded事件处理程序中，我们检查数据库中是否已创建名为"users"的对象存储空间，如果不存在则创建。

在onsuccess事件处理程序中，我们查询"users"对象存储空间中的所有数据，并将数据存储在users引用中。

最后，我们在模板中使用v-for指令来遍历users数组，并显示每个用户的用户名和详细信息

总而言之，IndexedDB 是一种功能强大的客户端数据库解决方案，可以保存和操作复杂的结构化数据。当应用程序需要处理大规模、复杂的数据时，IndexedDB 是 LocalStorage 的一个升级选择，具有更高级的功能和更大的容量。

存储之争：Cookie vs Web Storage vs IndexedDB

简介

应用

cookie

至于代码层面：

1. js-cookie:

2. universal-cookie

localStorage 和 sessionStorage

IndexedDB