说说四种浏览器提供的本地存储技术：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);
});
相关推荐
耶啵奶膘37 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张，YOLO道路事故目标检测实战训练教程！
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情，跳到评论页面，携带对象参数写法：
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理：Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【TC3xx芯片】TC3xx芯片电源管理系统PMS详解05基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测06【经验分享】Ubuntu22.04安装微信(linux官方版)07Macbook pro M1 安装Ubuntu教程08RAG 实践- Ollama+RagFlow 部署本地知识库09Windows10安装PCL1.14.0及点云配准10文件或文件夹名称中有空格如何批量去除