前端面试：HTML5的离线储存怎么使用，工作原理能不能解释一下？

真愚翁

于 2024-08-29 10:00:00 发布

阅读量175

点赞数 10

文章标签：前端 html5 html

本文链接：https://blog.csdn.net/2401_86900447/article/details/141567292

版权

HTML5 提供的离线存储主要是通过 LocalStorage 和 SessionStorage 以及 IndexedDB 来实现的。下面将详细介绍这些技术的使用方法和工作原理。

LocalStorage 和 SessionStorage

1. LocalStorage

用法：
- 可以使用 localStorage 对象来存储数据，数据在用户关闭浏览器后仍然保持。

// 存储数据  localStorage.setItem('key', 'value');  

// 读取数据  const value = localStorage.getItem('key');  

// 删除数据  localStorage.removeItem('key');  

// 清空所有数据  localStorage.clear();

2. SessionStorage

用法：
- sessionStorage 与 localStorage 类似，但数据仅在当前会话期间可用，关闭标签页或浏览器窗口后数据将被丢弃。

// 存储数据  sessionStorage.setItem('key', 'value');  

// 读取数据  const value = sessionStorage.getItem('key');  

// 删除数据  sessionStorage.removeItem('key');  

// 清空所有数据  sessionStorage.clear();

3. 工作原理

存储原理：
- 数据以键值对（key-value）的形式存储在浏览器中，数据可以是字符串、数字等简易数据格式。
- localStorage 和 sessionStorage 的最大存储量取决于浏览器，但通常在 5MB 左右。
访问原理：
- 数据可以通过 JavaScript 直接访问。无论是在同一窗口、标签页下还是不同标签页下（对于 localStorage），同源策略（即相同的协议、域名和端口）下的数据可以被访问。

IndexedDB

1. 用法

IndexedDB 是一种更复杂的离线存储机制，适用于需要存储大量数据的应用程序。
API 是基于事件的异步方式，能够处理关系型数据。

// 打开一个数据库  const request = indexedDB.open('myDatabase', 1);  

// 数据库版本更新时执行  

request.onupgradeneeded = function(event) {  

  const db = event.target.result;  

  // 创建一个对象存储空间  

  db.createObjectStore('myObjectStore', { keyPath: 'id' });  

};  

// 数据库打开后执行  

request.onsuccess = function(event) {  

  const db = event.target.result;  

  

  // 事务处理  

  const transaction = db.transaction(['myObjectStore'], 'readwrite');  

  const store = transaction.objectStore('myObjectStore');  

  

  // 添加数据  

  store.add({ id: 1, name: 'John Doe' });  

  

  // 读取数据  

  const getRequest = store.get(1);  

  getRequest.onsuccess = function(event) {  

    console.log(event.target.result);  

  };  

};