简介

LocalStorage 是一种可以将 JSON 数据存储在浏览器本地存储中的方法。它常被用于存储用户的偏好设置,例如用户界面语言的选择(如从英文切换为德文)。当用户重新访问网页时,可以根据之前的选择恢复页面设置(如恢复为用户选择的语言)。


活动

1. 对比使用 JavaScript/LocalStorage 与 Cookies 的界面语言选择方法

  • LocalStorage 的特点:

    • 数据存储在用户浏览器中,无需发送到服务器。
    • 存储量较大(通常 5MB)。
    • 数据长期有效,除非用户手动清除。
    • 适用于单个设备上的长期偏好设置。
  • Cookies 的特点:

    • 数据存储在浏览器中,但会随着请求发送到服务器。
    • 存储量较小(通常 4KB)。
    • 可以设置过期时间,适合短期存储。
    • 更适合需要在服务器端访问的场景。

应用场景对比:

  • 如果语言设置仅用于本地页面显示且不需要服务器端处理,建议使用 LocalStorage。
  • 如果语言设置需要跨设备同步或需要服务器端支持,Cookies 是更好的选择。

2. 分析 BubbleBreaker WebApp 的 LocalStorage 使用

任务:

  • 分析由 bobak7 开发的 BubbleBreaker 简单 Web 应用程序。
  • 识别应用如何利用 LocalStorage 存储和加载最高分(highscores)。

分析步骤:

  1. 识别 LocalStorage 使用:

    • 查找 localStorage.setItem(key, value)localStorage.getItem(key) 的使用。
    • 确认最高分是否存储在 LocalStorage 中,存储的键名是什么(例如 highscores)。
  2. 存储最高分的机制:

    • 检查代码逻辑是否在游戏结束时调用 localStorage.setItem 将最高分存储为 JSON 格式。
    • 示例代码:
      function saveHighScore(score) {
        let highScores = JSON.parse(localStorage.getItem("highscores")) || [];
        highScores.push(score);
        highScores.sort((a, b) => b - a); // 降序排列
        highScores = highScores.slice(0, 10); // 保留前 10 名
        localStorage.setItem("highscores", JSON.stringify(highScores));
      }
      
  3. 加载最高分的机制:

    • 检查页面加载时是否使用 localStorage.getItem 从 LocalStorage 加载最高分。
    • 示例代码:
      function loadHighScores() {
        const highScores = JSON.parse(localStorage.getItem("highscores")) || [];
        highScores.forEach((score, index) => {
          console.log(`Rank ${index + 1}: ${score}`);
        });
      }
      
  4. 结合 UI 展示最高分:

    • 确认是否有代码从 LocalStorage 中读取分数并动态更新到页面中,例如:
      document.getElementById("highscoreList").innerHTML = highScores
        .map((score, index) => `<li>Rank ${index + 1}: ${score}</li>`)
        .join("");
      

通过这两项活动,你可以深入理解 LocalStorage 的使用场景以及如何结合实际应用(如游戏)实现本地存储与加载功能。这不仅适用于语言设置,还可以扩展到其他用户偏好和应用场景。

Last modified: Monday, 13 January 2025, 3:13 PM