前端开发中常用的存储方法(带解析)

本文涉及的产品
云解析DNS,个人版 1个月
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 前端存储方法包括Cookie、localStorage、sessionStorage、IndexedDB和已废弃的WebSQL。Cookie用于存储小量数据,每次请求时发送到服务器,可设置过期时间。localStorage和sessionStorage都是HTML5提供的,前者数据永久存储,后者会话关闭后清除。IndexedDB是存储大量结构化数据的数据库,支持索引和事务。WebSQL已废弃,但部分浏览器仍支持。Cache Storage用于缓存响应,提高离线访问性能,通过Service Worker控制。

前端存储是指在浏览器端存储数据的方法。以下是一些常见的前端存储方法及其详细介绍和解析:


一、Cookies(HTTP Cookies):

介绍:Cookies 是一小段存储在客户端的数据。它们在每次请求时通过 HTTP 头部发送到服务器,用于在客户端和服务器之间存储会话数据。

解析:Cookies 通常用于存储持久化数据,例如用户首选项、会话信息等。每个 Cookie 都有一个名称、一个值以及可选的属性,例如过期时间和作用域。它们的大小限制为 4KB 左右,并且可以由服务器进行读取和写入。

使用方法:

// 设置 Cookie
document.cookie = "key=value; expires=expiry_date; path=/";
// 获取 Cookie
const cookies = document.cookie;
// 删除 Cookie
document.cookie = "key=; expires=expiry_date; path=/"; // 将过期时间设置为过去的时间

image.gif


二、localStorage:

描述:localStorage 是 HTML5 提供的一种持久化存储的方法,用于在浏览器中存储键值对。

特点:数据存储在浏览器端,不会过期,除非手动清除或者浏览器数据被删除。

使用方法:

// 存储数据
localStorage.setItem(key, value);
// 获取数据
localStorage.getItem(key);
// 删除数据
localStorage.removeItem(key);
// 清除所有数据
localStorage.clear();

image.gif


三、sessionStorage:

描述:sessionStorage 与 localStorage 类似,也是 HTML5 提供的一种持久化存储的方法,用于在浏览器中存储键值对。

特点:数据存储在浏览器端,但是会话关闭后数据会被清除。

使用方法:

// 存储数据
sessionStorage.setItem(key, value);
// 获取数据
sessionStorage.getItem(key);
// 删除数据
sessionStorage.removeItem(key);
// 清除所有数据
sessionStorage.clear();

image.gif


四、IndexedDB:

描述:IndexedDB 是 HTML5 提供的一种非关系型数据库,用于在浏览器中存储大量的结构化数据。是一个提供结构化存储的浏览器 API,可以存储大量的数据,并支持索引进行高效查询。

解析:IndexedDB 是一个基于事件的数据库系统,支持事务操作。它允许创建对象存储空间来存储和检索 JavaScript 对象。由于其功能强大,可以处理大量数据,因此适用于离线应用、缓存数据等场景。

使用方法:

// 打开数据库
const request = indexedDB.open(databaseName, version);
request.onerror = function(event) {
  console.error("数据库打开错误!");
};
request.onsuccess = function(event) {
  const db = event.target.result;
  // 执行操作
};
// 存储数据
const transaction = db.transaction([objectStoreName], "readwrite");
const objectStore = transaction.objectStore(objectStoreName);
objectStore.add(data);
// 获取数据
const transaction = db.transaction([objectStoreName], "readonly");
const objectStore = transaction.objectStore(objectStoreName);
const request = objectStore.get(key);
request.onsuccess = function(event) {
  const data = event.target.result;
};
// 删除数据
const transaction = db.transaction([objectStoreName], "readwrite");
const objectStore = transaction.objectStore(objectStoreName);
objectStore.delete(key);
// 关闭数据库
db.close();

image.gif


五、WebSQL(已废弃):

描述:Web SQL 是一种在客户端存储数据的数据库技术,已不再是 HTML5 标准的一部分,但目前仍被一些浏览器所支持。

解析:WebSQL 提供了一个 SQL 数据库引擎,允许创建数据库、表和执行 SQL 查询。但是,它已被废弃,不再是标准的 Web API,并且在某些浏览器中不再受支持。

使用方法:

// 打开数据库
const db = openDatabase(databaseName, version, displayName, estimatedSize);
// 创建表
db.transaction(function(tx) {
  tx.executeSql("CREATE TABLE IF NOT EXISTS table_name (column1, column2, ...)");
});
// 插入数据
db.transaction(function(tx) {
  tx.executeSql("INSERT INTO table_name (column1, column2, ...) VALUES (?, ?, ...)", [value1, value2, ...]);
});
// 查询数据
db.transaction(function(tx) {
  tx.executeSql("SELECT column1, column2, ... FROM table_name WHERE condition", [], function(tx, result) {
    const rows = result.rows;
    // 处理查询结果
  });
});

image.gif


六、Cache Storage(缓存存储):

介绍:Cache Storage 是用于存储缓存响应的浏览器 API。它可以将网络请求的响应缓存起来,以供后续离线访问或提高性能。

解析:使用 Cache Storage,可以将文件(例如脚本、样式表和图像)缓存到浏览器中,并在用户离线时提供离线体验。它使用 Service Worker 进行控制,具有高度的可自定义性和灵活性。

使用方法:

1)打开缓存:(Cache Storage)
           
首先,需要使用 caches.open() 方法打开一个特定的缓存。该方法接受一个缓存名称作为参数,并返回一个 Promise 对象,用于表示缓存是否成功打开。

caches.open('my-cache')
  .then(function(cache) {
    // 在这里操作缓存
  });

image.gif

2)添加文件到缓存:

            使用 cache.add() 或 cache.addAll() 方法将文件添加到缓存中。例如

cache.add('/path/to/file'); // 添加单个文件
cache.addAll(['/path/to/file1', '/path/to/file2']); // 添加多个文件

image.gif

3)检索缓存中的响应:

            使用 cache.match() 方法从缓存中检索特定的请求。例如:

cache.match('/path/to/file')
  .then(function(response) {
    if (response) {
      // 处理响应
    }
  });

image.gif

4)更新缓存:

            使用 cache.put() 方法更新缓存中的响应。例如:

cache.match('/path/to/file')
  .then(function(response) {
    if (response) {
      // 更新缓存
      cache.put('/path/to/file', new Response('Updated content'));
    }
  });

image.gif

5)删除缓存:

            使用 cache.delete() 方法从缓存中删除指定的请求或响应。例如:

cache.delete('/path/to/file');

image.gif

6)清空缓存:

            使用 cache.clear() 方法清空整个缓存。例如:

cache.clear();

image.gif

  • 注意:Cache Storage API 必须在 Service Worker 脚本中使用,因为它需要在后台运行。要使用 Cache Storage,首先需要注册和安装一个 Service Worker。
  • 这是 Cache Storage 的基本用法,你可以根据具体需求进行扩展和定制。请注意,Cache Storage 的操作是异步的,因此需要使用 Promise 或 async/await 来处理结果和错误。
相关文章
|
3天前
run()方法和start()方法测试解析
run()方法和start()方法测试解析
|
4天前
|
前端开发 JavaScript
Vue前端渲染blob二进制对象图片的方法
Vue前端渲染blob二进制对象图片的方法
9 0
|
7天前
|
数据采集 JSON API
深入解析:抖音视频标题的Python爬虫提取方法
深入解析:抖音视频标题的Python爬虫提取方法
|
10天前
|
JavaScript 前端开发 网络架构
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上
文本,展现到文章的面前,Vue结合v-for实现传参的方法,好的资料,Vue实现动态绑定,数据放到前端页面上
|
12天前
|
前端开发 JavaScript 测试技术
突破前端瓶颈的方法
突破前端瓶颈的方法
10 0
|
13天前
|
前端开发 JavaScript C++
前端 JS 经典:判断数组的准确方法
前端 JS 经典:判断数组的准确方法
9 0
|
13天前
|
域名解析 缓存 网络协议
前端必备的网络知识 DNS CDN
前端必备的网络知识 DNS CDN
22 0
|
14天前
|
JavaScript
js 获取并解析 url 中参数的三种方法
js 获取并解析 url 中参数的三种方法
9 0
|
14天前
|
XML JavaScript Java
解析XML文件的几种方法
解析XML文件的几种方法

推荐镜像

更多