说说四种浏览器提供的本地存储技术：IndexedDB，WebSQL，localStorage和sessionStorage

飘尘2023-11-19 15:27

引言

随着Web应用的发展，越来越多的数据需要在客户端进行存储和处理，以提高用户体验，减少网络流量，以及实现离线功能。浏览器提供了多种本地存储技术，让开发者可以根据不同的需求选择合适的方案。本文将介绍四种常见的本地存储技术：IndexedDB，WebSQL，localStorage和sessionStorage，分析它们的特点，优缺点，以及适用的场景。

IndexedDB

IndexedDB是一种在浏览器中存储结构化数据的技术，它使用对象仓库（object store）来存储键值对（key-value pair），并且支持事务（transaction），索引（index），游标（cursor）等功能，可以实现复杂的查询和操作。IndexedDB是一个异步（asynchronous）的API，它不会阻塞浏览器的主线程，也不会影响页面的性能。IndexedDB的存储空间比较大，一般不少于250MB，甚至没有上限，取决于浏览器的实现和用户的设置。IndexedDB还支持二进制数据（binary data）的存储，例如ArrayBuffer对象和Blob对象。

IndexedDB的优点

  • 存储空间大，可以存储大量的数据
  • 支持事务，保证数据的一致性和完整性
  • 支持索引，可以快速地检索数据
  • 支持游标，可以遍历和修改数据
  • 支持二进制数据，可以存储图片，音频，视频等文件
  • 异步操作，不会阻塞浏览器的主线程

IndexedDB的缺点

  • API复杂，需要学习和掌握很多概念和方法
  • 不支持SQL语句，需要使用原生的API进行操作
  • 不同浏览器的实现可能存在差异，需要考虑兼容性问题
  • 数据库的版本管理比较麻烦，需要处理升级和降级的情况

IndexedDB的适用场景

  • 需要存储大量的结构化数据，例如电子邮件，日历，联系人等
  • 需要存储二进制数据，例如图片，音频，视频等文件
  • 需要进行复杂的查询和操作，例如模糊搜索，范围查询，排序等
  • 需要支持离线功能，例如离线阅读，离线编辑等

IndexedDB的使用示例

以下是一个使用IndexedDB的简单示例，展示了如何打开数据库，创建对象仓库，添加，读取和删除数据，以及监听事件的方法：

js 复制代码 
// 打开数据库，如果不存在则创建，指定数据库的名称和版本号
var request = window.indexedDB.open("MyDatabase", 1);

// 监听错误事件
request.onerror = function(event) {
  console.log("Error opening database:", event.target.errorCode);
};

// 监听成功事件
request.onsuccess = function(event) {
  // 获取数据库对象
  var db = event.target.result;
  console.log("Success opening database:", db);
};

// 监听升级事件，如果指定的版本号高于当前的版本号，会触发该事件
request.onupgradeneeded = function(event) {
  // 获取数据库对象
  var db = event.target.result;
  console.log("Upgrading database:", db);

  // 创建一个名为Books的对象仓库，指定主键为id
  var objectStore = db.createObjectStore("Books", { keyPath: "id" });

  // 创建一个名为title的索引，指定唯一性为false
  objectStore.createIndex("title", "title", { unique: false });

  // 添加一些初始数据
  objectStore.add({ id: 1, title: "JavaScript: The Definitive Guide", author: "David Flanagan" });
  objectStore.add({ id: 2, title: "JavaScript: The Good Parts", author: "Douglas Crockford" });
  objectStore.add({ id: 3, title: "Eloquent JavaScript", author: "Marijn Haverbeke" });
};

// 定义一个函数，用于添加数据
function addBook(book) {
  // 打开数据库
  var request = window.indexedDB.open("MyDatabase", 1);

  // 监听成功事件
  request.onsuccess = function(event) {
    // 获取数据库对象
    var db = event.target.result;

    // 启动一个事务，指定操作的对象仓库和模式为读写
    var transaction = db.transaction(["Books"], "readwrite");

    // 获取对象仓库
    var objectStore = transaction.objectStore("Books");

    // 添加数据
    var request = objectStore.add(book);

    // 监听成功事件
    request.onsuccess = function(event) {
      console.log("Success adding book:", book);
    };

    // 监听错误事件
    request.onerror = function(event) {
      console.log("Error adding book:", event.target.errorCode);
    };
  };
}

// 定义一个函数，用于读取数据
function getBook(id) {
  // 打开数据库
  var request = window.indexedDB.open("MyDatabase", 1);

  // 监听成功事件
  request.onsuccess = function(event) {
    // 获取数据库对象
    var db = event.target.result;

    // 启动一个事务，指定操作的对象仓库和模式为只读
    var transaction = db.transaction(["Books"], "readonly");

    // 获取对象仓库
    var objectStore = transaction.objectStore("Books");

    // 读取数据
    var request = objectStore.get(id);

    // 监听成功事件
    request.onsuccess = function(event) {
      // 获取结果
      var book = event.target.result;
      console.log("Success getting book:", book);
    };

    // 监听错误事件
    request.onerror = function(event) {
      console.log("Error getting book:", event.target.errorCode);
    };
  };
}

// 定义一个函数，用于删除数据
function deleteBook(id) {
  // 打开数据库
  var request = window.indexedDB.open("MyDatabase", 1);

  // 监听成功事件
  request.onsuccess = function(event) {
    // 获取数据库对象
    var db = event.target.result;

    // 启动一个事务，指定操作的对象仓库和模式为读写
    var transaction = db.transaction(["Books"], "readwrite");

    // 获取对象仓库
    var objectStore = transaction.objectStore("Books");

    // 删除数据
    var request = objectStore.delete(id);

    // 监听成功事件
    request.onsuccess = function(event) {
      console.log("Success deleting book:", id);
    };

    // 监听错误事件
    request.onerror = function(event) {
      console.log("Error deleting book:", event.target.errorCode);
    };
  };
}

// 调用函数进行测试
addBook({ id: 4, title: "You Don't Know JS", author: "Kyle Simpson" });
getBook(2);
deleteBook(3);

WebSQL

WebSQL是一种在浏览器中存储结构化数据的技术，它使用关系型数据库（relational database）来存储数据，并且支持SQL语句来进行查询和操作。WebSQL是一个同步（synchronous）的API，它会阻塞浏览器的主线程，可能影响页面的性能。WebSQL的存储空间一般在2.5MB到10MB之间，不同的浏览器有不同的限制。WebSQL还支持二进制数据的存储，例如Blob对象。

WebSQL的优点

  • 支持SQL语句，可以方便地进行查询和操作
  • 支持二进制数据，可以存储图片，音频，视频等文件
  • 支持事务，保证数据的一致性和完整性

WebSQL的缺点

  • 存储空间小，不能存储大量的数据
  • 同步操作，会阻塞浏览器的主线程
  • 不再被维护和更新，已被W3C废弃，不推荐使用
  • 不同浏览器的实现可能存在差异，需要考虑兼容性问题

WebSQL的适用场景

  • 需要存储少量的结构化数据，例如用户的设置，偏好，历史记录等
  • 需要使用SQL语句来进行查询和操作，例如筛选，排序，分组，聚合等
  • 需要存储二进制数据，例如图片，音频，视频等文件

WebSQL的使用示例

以下是一个使用WebSQL的简单示例，展示了如何打开数据库，创建表，插入，查询和删除数据，以及监听事件的方法：

js 复制代码 
// 打开数据库，如果不存在则创建，指定数据库的名称，版本，描述和大小
var db = window.openDatabase("MyDatabase", "1.0", "A database of books", 5 * 1024 * 1024);

// 监听错误事件
db.onerror = function(event) {
  console.log("Error opening database:", event.target.errorCode);
};

// 创建一个名为Books的表，指定id为主键，title和author为字段
db.transaction(function(tx) {
  tx.executeSql("CREATE TABLE IF NOT EXISTS Books (id INTEGER PRIMARY KEY, title TEXT, author TEXT)");
});

// 插入一些初始数据
db.transaction(function(tx) {
  tx.executeSql("INSERT INTO Books (title, author) VALUES (?, ?)", ["JavaScript: The Definitive Guide", "David Flanagan"]);
  tx.executeSql("INSERT INTO Books (title, author) VALUES (?, ?)", ["JavaScript: The Good Parts", "Douglas Crockford"]);
  tx.executeSql("INSERT INTO Books (title, author) VALUES (?, ?)", ["Eloquent JavaScript", "Marijn Haverbeke"]);
});

// 定义一个函数，用于插入数据
function addBook(book) {
  // 插入数据
  db.transaction(function(tx) {
    tx.executeSql("INSERT INTO Books (title, author) VALUES (?, ?)", [book.title, book.author], function(tx, result) {
      // 监听成功事件
      console.log("Success adding book:", book);
    }, function(tx, error) {
      // 监听错误事件
      console.log("Error adding book:", error.message);
    });
  });
}

// 定义一个函数，用于查询数据
function getBook(id) {
  // 查询数据
  db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM Books WHERE id = ?", [id], function(tx, result) {
      // 监听成功事件
      if (result.rows.length > 0) {
        // 获取结果
        var book = result.rows.item(0);
        console.log("Success getting book:", book);
      } else {
        console.log("No book found with id:", id);
      }
    }, function(tx, error) {
      // 监听错误事件
      console.log("Error getting book:", error.message);
    });
  });
}

// 定义一个函数，用于删除数据
function deleteBook(id) {
  // 删除数据
  db.transaction(function(tx) {
    tx.executeSql("DELETE FROM Books WHERE id = ?", [id], function(tx, result) {
      // 监听成功事件
      console.log("Success deleting book:", id);
    }, function(tx, error) {
      // 监听错误事件
      console.log("Error deleting book:", error.message);
    });
  });
}

// 调用函数进行测试
addBook({ title: "You Don't Know JS", author: "Kyle Simpson" });
getBook(2);
deleteBook(3);

localStorage和sessionStorage

localStorage和sessionStorage是两种在浏览器中存储键值对的技术，它们使用简单的API来进行操作，不需要创建数据库或表。localStorage和sessionStorage的存储空间一般在5MB左右，不同的浏览器有不同的限制。localStorage和sessionStorage只能存储字符串类型的数据，如果需要存储其他类型的数据，需要进行序列化和反序列化的操作。

localStorage和sessionStorage的区别

localStorage和sessionStorage的主要区别在于它们的存储周期和作用域不同：

  • localStorage的存储周期是永久的，除非用户手动删除，否则数据不会过期或被清除。localStorage的作用域是同源的，即同一个域名下的不同页面可以共享数据，但不同域名下的页面不能访问数据。
  • sessionStorage的存储周期是会话级别的，即当用户关闭浏览器或标签页时，数据会被清除。sessionStorage的作用域是同源且同窗口的，即同一个域名下的同一个窗口下的不同页面可以共享数据，但不同窗口或不同域名下的页面不能访问数据。

localStorage和sessionStorage的优点

  • API简单，易于使用
  • 存储空间相对较大，可以存储一些常用的数据
  • 同步操作，不需要回调函数

localStorage和sessionStorage的缺点

  • 存储空间相对较小，不能存储大量的数据
  • 只能存储字符串类型的数据，需要进行序列化和反序列化的操作
  • 同步操作，会阻塞浏览器的主线程
  • 不支持事务，不能保证数据的一致性和完整性
  • 不支持复杂的查询和操作，只能根据键来获取或设置值

localStorage和sessionStorage的适用场景

  • 需要存储少量的非结构化数据，例如用户的设置，偏好，历史记录等
  • 需要在同一个域名下的不同页面或同一个窗口下的不同页面之间共享数据
  • 需要根据不同的存储周期和作用域来选择合适的存储技术

localStorage和sessionStorage的使用示例

以下是一个使用localStorage和sessionStorage的简单示例，展示了如何设置，获取和删除数据，以及监听事件的方法：

js 复制代码 
// 设置数据，使用setItem方法，指定键和值
localStorage.setItem("name", "Alice");
sessionStorage.setItem("age", "18");

// 获取数据，使用getItem方法，指定键
var name = localStorage.getItem("name");
var age = sessionStorage.getItem("age");
console.log("name:", name, "age:", age);

// 删除数据，使用removeItem方法，指定键
localStorage.removeItem("name");
sessionStorage.removeItem("age");

// 清空数据，使用clear方法，不需要指定键
localStorage.clear();
sessionStorage.clear();

// 监听事件，使用addEventListener方法，指定事件类型和回调函数
window.addEventListener("storage", function(event) {
  // 获取事件的相关信息，例如键，旧值，新值，来源等
  var key = event.key;
  var oldValue = event.oldValue;
  var newValue = event.newValue;
  var url = event.url;
  console.log("Storage event:", key, oldValue, newValue, url);
});
相关推荐
清秋9 分钟前
全网最全 ECMAScript 攻略（ 更新至 ES2026）
前端·javascript·编程语言
Cao_Ron27 分钟前
用 SVG image symbol 画 ECharts graph 圆形节点
前端
hxy060131 分钟前
React-Call让你的React组件像异步函数一样调用
前端·react.js
Hilaku32 分钟前
为什么 AI 写前端时，总是优先选择 React，而不是 Vue？
前端·javascript·程序员
京东云开发者34 分钟前
GPT-5.6、ChatGPT Work 与 Codex 更新食用指南
前端
Cao_Ron1 小时前
用 ECharts graph 画出卡片式矩形节点
前端
skiyee1 小时前
换个底座的 Wot Starter 居然让 AI 更懂项目！
前端·ai编程
anyup1 小时前
这一套绝了！AI 大模型写故事，星云 SDK 驱动 3D 数字人实时演绎
前端·人工智能·aigc
耀耀切克闹灬1 小时前
短链跳转
前端
孟陬1 小时前
高质量全方位的 AI 工具 sse-stuntman — Mock SSE 接口
前端·node.js·openai
热门推荐
01GitHub 镜像站点02AI科技热点日报 | 2026年07月01日03幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna：官方性能数据与选型分析062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？072026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf082026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路102026 年 AI 大模型 & AI 编程工具实战全总结