js 如何储存和调取缓存信息 完整代码示例

JavaScript 中通常使用浏览器内置的 `localStorage` 或者 `sessionStorage` 对象来存储数据，并通过它们进行缓存。这两个对象允许你在用户的设备上持久化存储数据，即使关闭页面或重启浏览器也不会丢失。

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

// 从 localStorage 调取数据
var value = localStorage.getItem('key');
console.log(value); // 输出 'value'

// 如果你想删除某个键值对
localStorage.removeItem('key');
localStorage.clear(); // 清空整个 localStorage

对于 session storage，其生命周期仅限于当前会话，即当用户离开当前页面或浏览器标签关闭时，数据会被自动清除：

// 存储数据 (sessionStorage)
sessionStorage.setItem('sessionKey', 'sessionValue');

// 调取数据
var sessionStorageValue = sessionStorage.getItem('sessionKey');

注意，`localStorage` 和 `sessionStorage` 都是文本格式的数据，不适合存储复杂结构的对象，可以先将其序列化为 JSON 字符串再存储。

如果你想要自定义缓存方案，比如使用第三方库如 `axios` 的拦截器或者 `ServiceWorker` 技术做离线缓存，那代码会稍微复杂一些。这里是一个简单的 ServiceWorker 示例：

// sw.js (Service Worker)
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('myCache').then(function(cache) {
      return cache.addAll([
        './index.html',
        './styles.css',
        './scripts.js'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      // 缓存命中则返回缓存内容
      if (response) {
        return response;
      }
      // 缺失则向服务器请求
      return fetch(event.request);
    }).catch(function() {
      // 无法获取，则返回404
      return caches.match('/404.html');
    })
  );
});

然后需要在 HTML 中注册这个 Service Worker:

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(function(error) {
        console.log('Service Worker registration failed:', error);
      });
  }, false);
}
</script>