说说四种浏览器提供的本地存储技术：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);
});
相关推荐
霸王蟹3 分钟前
Vue3 项目中为啥不需要根标签了？
前端·javascript·vue.js·笔记·学习
小白求学111 分钟前
CSS计数器
前端·css
Anita_Sun19 分钟前
🌈 Git 全攻略 - Git 的初始设置 ✨
前端
等什么君！1 小时前
复习HTML(进阶）
前端·html
儒雅的烤地瓜1 小时前
JS | 如何解决ajax无法后退的问题?
前端·javascript·ajax·pushstate·popstate事件·replacestate
觉醒法师1 小时前
Vue3+TS项目 - ref和useTemplateRef获取组件实例
开发语言·前端·javascript
老章学编程i1 小时前
Vue工程化开发
开发语言·前端·javascript·vue.js·前端框架
思考的橙子1 小时前
前端初识之一
前端
tanxiaomi2 小时前
vue 不是spa 单页面应用吗？ 配置路由工作模式为history 后 ,为什么配置Nginx的 try_files 可以根据url 找到对应的文件？
前端·vue.js·nginx
果子切克now2 小时前
vue3导入本地图片2种实现方法
前端·javascript·vue.js
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05RAG 实践- Ollama+RagFlow 部署本地知识库06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提072024CCPC网络预选赛 I. 找行李 【DP】08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点