前端缓存有哪些以及示例

前端缓存主要有以下几种方式：

1. 浏览器缓存：浏览器会自动缓存一些资源，如 JavaScript、CSS、图片等。这是通过 HTTP 的缓存控制头部实现的，如 Cache-Control、Expires、ETag、Last-Modified 等。

// 服务器设置 HTTP 响应头部，告诉浏览器缓存资源

res.setHeader('Cache-Control', 'public, max-age=3600');

2. Cookie：Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，主要用于保存用户的一些状态。

// 设置 Cookie

document.cookie = "username=John Doe";

3. Web Storage：包括 localStorage 和 sessionStorage，它们都是在客户端存储数据的方式，但生命周期不同。localStorage 的数据没有过期时间，而 sessionStorage 的数据在页面会话结束时会被清除。

// 使用 localStorage
localStorage.setItem('key', 'value');
let data = localStorage.getItem('key');

// 使用 sessionStorage
sessionStorage.setItem('key', 'value');
let data = sessionStorage.getItem('key');

4. IndexedDB：一个运行在浏览器上的非关系型数据库，用于存储大量结构化数据。

// 使用 IndexedDB

let openRequest = indexedDB.open("myDatabase", 1);

openRequest.onupgradeneeded = function(e) {

  let db = e.target.result;

  let store = db.createObjectStore("myStore", {keyPath: "id"});

  store.createIndex("nameIndex", ["name.last", "name.first"]);

};

openRequest.onsuccess = function(e) {

  let db = e.target.result;

  let tx = db.transaction("myStore", "readwrite");

  let store = tx.objectStore("myStore");

  store.put({id: 12345, name: {first: "John", last: "Doe"}});

};

5. Service Worker Cache：Service Worker 提供了一个可编程的缓存，用于缓存网络请求和响应。

// 使用 Service Worker Cache
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/js/main.js',
        '/css/main.css'
      ]);
    })
  );
});

以上就是前端常用的几种缓存方式，它们各有优点和适用场景，可以根据需要选择合适的方式进行缓存。