Web客户端存储方式

Cookie(不推荐)

• 小型文本文件，可用于在客户端存储少量数据
• 通常用于存储会话状态、用户偏好等信息
• 请注意，当您尝试从JS代码中读取Cookie时，您只能访问当前脚本来源所在的域名/子域名下的Cookie，而非其他域下的Cookie，例如如果使用iframe就会获取失败。

document.cookie = "key=value;expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/";
const cookies = document.cookie.split(";");
const cookieMap = {};
​
cookies.forEach(cookie => {
const [key, value] = cookie.split("=");
cookieMap[key] = decodeURIComponent(value);
});
​
const value = cookieMap["key"];

Web Storage

localStorage

• 基于键值对的存储方式
• 可以在客户端存储较大量的数据，比如表单数据、应用程序设置等
• 数据不会过期，除非手动删除

// 存储数据
localStorage.setItem('key', 'value');
​
// 获取数据
const value = localStorage.getItem('key');
​
// 删除数据
localStorage.removeItem('key');

sessionStorage

• 基于键值对的存储方式
• 可以在客户端存储较大量的数据，比如表单数据、应用程序设置等
• 数据只存在于当前会话期间，关闭窗口或标签页后数据自动清除

// 存储数据
sessionStorage.setItem('key', 'value');
​
// 获取数据
const value = sessionStorage.getItem('key');
​
// 删除数据
sessionStorage.removeItem('key');

IndexedDB

• 基于对象的数据库
• 可以在客户端存储大量的结构化数据，适合更复杂的应用程序

// 打开IndexedDB数据库
const request = window.indexedDB.open('databaseName', databaseVersion);
​
request.onerror = function(event) {
  // 处理错误
};
​
request.onsuccess = function(event) {
  const db = event.target.result;
  // 使用数据库
};
​
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  // 更新数据库结构
};

当然 indexedDb 手动写储存相对于手写mysql那么麻烦，可以借助三方插件，比如mybatis、jpa当然这些都没有，前端有Dexie.js、localForage、IDBWrapper、JsStore根据自己业务选择。

caches缓存

• Web客户端储存数据的一种方式之一
• 可以在客户端缓存网络请求或其他资源，提高应用性能
• 关闭窗口或标签页后数据自动清除

// 缓存网络请求（需要服务端配合设置Cache-Control等头信息）
caches.open('cacheName').then(function(cache) {
  cache.add('/api/data').then(function() {
    console.log('成功缓存了数据');
  });
});
​
// 读取缓存数据
caches.match('/api/data').then(function(response) {
  if (response) {
    response.json().then(function(data) {
      console.log('读取到了缓存数据', data);
    });
  }
});

WebSQL（已经被弃用）

• 部分浏览器还支持
• 提供了一种在客户端使用SQL语言的接口来操作关系型数据库

// 打开WebSQL数据库（已不推荐使用）
const db = openDatabase('databaseName', 'databaseVersion', 'description', size);
​
// 创建表
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE tableName (column1, column2)');
});
​
// 插入数据
db.transaction(function(tx) {
  tx.executeSql('INSERT INTO tableName (column1, column2) VALUES (?, ?)', ['value1', 'value2']);
});
​
// 查询数据
db.transaction(function(tx) {
  tx.executeSql('SELECT * FROM tableName WHERE column1 = ?', ['value1'], function(tx, result) {
    const rows = result.rows;
    // 处理查询结果
  });
});

查看数据入口

F12查看Application数据