JavaScript常见缓存数据处理方式并说明特性

news2024/10/6 16:57:14

在JavaScript中，常见的几种缓存数据的方式:

1、LocalStorage：使用LocalStorage可以将数据以键值对的形式存储在浏览器中，该数据在页面刷新后依然存在，只要不更换浏览器或清空缓存这种缓存就会一直存在
我们执行

localStorage.setItem("name", "小猫猫")

我们存入了一个键为 name 值为小猫猫的缓存
这里键必须是字符串但字符串内容顺便定义值就是缓存什么都可以

之后我们就可以运行

let name = localStorage.getItem("name");
console.log(name);

运行结果如下
在这里插入图片描述

localStorage.getItem("键名");

这样就可以通过键找到值这就是键值对缓存的意义

然后我们可以

localStorage.removeItem("name")

通过键删除指定缓存
这样我们再去获取name 就拿不到了
在这里插入图片描述
LocalStorage还是比较强大的大家可以试试你刷新或者关掉浏览器再打开只要还是同一个浏览器那么这个缓存是会一直存在的
最后执行

localStorage.clear()

这个东西就比较无脑了直接将所有的LocalStorage缓存数据都干掉
只要你是缓存在LocalStorage里的不管什么数据都会被localStorage.clear()清除

2、SessionStorage：与LocalStorage类似，SessionStorage也是将数据以键值对的形式存储在浏览器中，但它的数据只在当前会话中有效，在新窗口打开则取不到缓存，
我们可以执行如下语句

sessionStorage.setItem("age", 22)

加入一个键值对缓存键为字符串 age 值为数字 22
然后我们执行

let age = sessionStorage.getItem("age");
console.log(age);

通过get方法获取运行结果如下
在这里插入图片描述
但大家可以手动测试一下
我们复制地址
然后在一个新的浏览器窗口打开缓存就拿不到了
概念是只存在当前对话框
然后我们执行

sessionStorage.removeItem("age")

根据指定的键清除对应缓存这里我们将 age清了

然后最后就是王牌

sessionStorage.clear()

清理掉所有sessionStorage下的缓存数据

3、Cookie：Cookie是存储在用户计算机上的小型文本文件，可以设置过期时间，在指定时间内数据会一直存在

我们可以这样写
我们设置键 name 值小猫猫时间为一分钟这个时间大家要自己算一下
最后处理好之后缓存进cookie中

// 获取当前时间
var currentTime = new Date();
// 设置Cookie过期时间为1分钟后
var expiryTime = new Date(currentTime.getTime() + 60000);
// 构建Cookie字符串
var cookieString = "name=小猫猫;expires=" + expiryTime.toUTCString() + ";path=/";
// 设置Cookie
document.cookie = cookieString;

然后我们执行

let cookies = document.cookie;
console.log(cookies);

这里就会获取到整个cookies对象
在这里插入图片描述
然后我们执行

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"

指定将我们之前缓存在cookie的name 清除掉
在这里插入图片描述
4 IndexedDB: IndexedDB适用于大批量数据存储缓存，它本身的API就是异步的，不会影响主流程。非常适合配合后台大量的API数据存储

我们先需要在页面加载时执行

const dbName = "myDB";
const request = indexedDB.open(dbName, 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("cache", { keyPath: "name" });
  console.log(objectStore);
};

创建一个本地数据存储库
然后

request.onsuccess = function(event) {
const db = event.target.result;
  const transaction = db.transaction(["cache"], "readwrite");
  const objectStore = transaction.objectStore("cache");

  const data = { name: "小猫猫" };
  const request = objectStore.add(data);

  request.onsuccess = function() {
    console.log("数据已添加到缓存");
  };

  transaction.oncomplete = function() {
    db.close();
  };
};

这里我们直接加入一个对象 objectStore.add(data);
这样我们就将这个
data存入了缓存中
然后我们执行

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["cache"], "readonly");
  const objectStore = transaction.objectStore("cache");

  const request = objectStore.get("小猫猫");

  request.onsuccess = function(event) {
    const data = event.target.result;
    console.log("获取到缓存数据：", data);
  };

  transaction.oncomplete = function(event) {
    db.close();
  };
};

这样就获取到了我们的数据
在这里插入图片描述
如果我们想更新内容可以

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["cache"], "readwrite");
  const objectStore = transaction.objectStore("cache");

  const request = objectStore.get("小猫猫");

  request.onsuccess = function(event) {
    const data = event.target.result;
    data.name = "小狗狗";

    const updateRequest = objectStore.put(data);

    updateRequest.onsuccess = function(event) {
      console.log("缓存数据已更新");
    };
  };

  transaction.oncomplete = function(event) {
    db.close();
  };
};

最后我们想删除数据可以

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(["cache"], "readwrite");
  const objectStore = transaction.objectStore("cache");

  const deleteRequest = objectStore.delete("小猫猫");

  deleteRequest.onsuccess = function(event) {
    console.log("缓存数据已删除");
  };

  transaction.oncomplete = function(event) {
    db.close();
  };
};