说说四种浏览器提供的本地存储技术：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);
});
相关推荐
一城烟雨_26 分钟前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想1 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师2 小时前
第二部分：网页的妆容 —— CSS（下）
前端·css
一纸忘忧2 小时前
成立一周年！开源的本土化中文文档知识库
前端·javascript·github
涵信3 小时前
第九节：性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子3 小时前
CSS单位完全指南
前端·css
SunTecTec4 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪5 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程5 小时前
ES练习册
java·前端·elasticsearch
Asthenia04125 小时前
Netty编解码器详解与实战
前端
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03西电B测-计算机网络综合实验(含验收问题)04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07Python基于Flask的豆瓣电影数据分析可视化系统（附源码，文档说明）08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09我决定放弃搞 Java 了10最新 Kubernetes 集群部署 + flannel 网络插件（保姆级教程，最新 K8S 版本）