html5 临时存储

原创

mob64ca12d9b014 2024-03-28 07:39:10 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d9b014的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5 临时存储

HTML5 是一种用于构建网页和网页应用程序的标准。其中的 Web Storage API 可以让开发者在客户端存储和获取数据，而不需要发起服务器请求。其中有两种存储机制：sessionStorage 和 localStorage。

sessionStorage

sessionStorage 用于临时存储会话级别的数据，即数据在会话结束后会被清除。它适用于只在当前会话中使用的数据。

<script>
  // 存储数据到 sessionStorage
  sessionStorage.setItem('key', 'value');

  // 从 sessionStorage 中获取数据
  const data = sessionStorage.getItem('key');
  console.log(data); // 输出 'value'

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

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

localStorage

localStorage 用于长期存储数据，即数据在浏览器关闭后仍然保留。它适用于需要持久化存储的数据。

<script>
  // 存储数据到 localStorage
  localStorage.setItem('key', 'value');

  // 从 localStorage 中获取数据
  const data = localStorage.getItem('key');
  console.log(data); // 输出 'value'

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

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

应用示例

以下是一个使用 sessionStorage 存储用户选择的喜好颜色的示例。

<button onclick="saveColor('red')">红色</button>
<button onclick="saveColor('blue')">蓝色</button>

<script>
  function saveColor(color) {
    sessionStorage.setItem('color', color);
    updateColor();
  }

  function updateColor() {
    const color = sessionStorage.getItem('color');
    document.body.style.backgroundColor = color;
  }

  updateColor();
</script>

数据可视化

为了更好地展示数据，我们可以使用饼状图和类图进行可视化。

饼状图

pie
  title 数据分布
  "数据A": 40
  "数据B": 30
  "数据C": 30

类图

classDiagram
  class Storage {
    - key: string
    - value: any
    + setItem(key: string, value: any): void
    + getItem(key: string): any
    + removeItem(key: string): void
    + clear(): void
  }