说说四种浏览器提供的本地存储技术：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);
});
相关推荐
dr李四维几秒前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~21 分钟前
网页F12：缓存的使用（设值、取值、删除）
前端·缓存
℘团子এ24 分钟前
vue3中如何上传文件到腾讯云的桶（cosbrowser）
前端·javascript·腾讯云
学习前端的小z30 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10量化方法怎么选？如何评估量化后的大模型LLM？