JavaScript编程
Completion requirements
简介
LocalStorage 是一种可以将 JSON 数据存储在浏览器本地存储中的方法。它常被用于存储用户的偏好设置,例如用户界面语言的选择(如从英文切换为德文)。当用户重新访问网页时,可以根据之前的选择恢复页面设置(如恢复为用户选择的语言)。
活动
1. 对比使用 JavaScript/LocalStorage 与 Cookies 的界面语言选择方法
-
LocalStorage 的特点:
- 数据存储在用户浏览器中,无需发送到服务器。
- 存储量较大(通常 5MB)。
- 数据长期有效,除非用户手动清除。
- 适用于单个设备上的长期偏好设置。
-
Cookies 的特点:
- 数据存储在浏览器中,但会随着请求发送到服务器。
- 存储量较小(通常 4KB)。
- 可以设置过期时间,适合短期存储。
- 更适合需要在服务器端访问的场景。
应用场景对比:
- 如果语言设置仅用于本地页面显示且不需要服务器端处理,建议使用 LocalStorage。
- 如果语言设置需要跨设备同步或需要服务器端支持,Cookies 是更好的选择。
2. 分析 BubbleBreaker WebApp 的 LocalStorage 使用
任务:
- 分析由 bobak7 开发的 BubbleBreaker 简单 Web 应用程序。
- 识别应用如何利用 LocalStorage 存储和加载最高分(highscores)。
分析步骤:
-
识别 LocalStorage 使用:
- 查找
localStorage.setItem(key, value)
和localStorage.getItem(key)
的使用。 - 确认最高分是否存储在 LocalStorage 中,存储的键名是什么(例如
highscores
)。
- 查找
-
存储最高分的机制:
- 检查代码逻辑是否在游戏结束时调用
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)); }
- 检查代码逻辑是否在游戏结束时调用
-
加载最高分的机制:
- 检查页面加载时是否使用
localStorage.getItem
从 LocalStorage 加载最高分。 - 示例代码:
function loadHighScores() { const highScores = JSON.parse(localStorage.getItem("highscores")) || []; highScores.forEach((score, index) => { console.log(`Rank ${index + 1}: ${score}`); }); }
- 检查页面加载时是否使用
-
结合 UI 展示最高分:
- 确认是否有代码从 LocalStorage 中读取分数并动态更新到页面中,例如:
document.getElementById("highscoreList").innerHTML = highScores .map((score, index) => `<li>Rank ${index + 1}: ${score}</li>`) .join("");
- 确认是否有代码从 LocalStorage 中读取分数并动态更新到页面中,例如:
通过这两项活动,你可以深入理解 LocalStorage 的使用场景以及如何结合实际应用(如游戏)实现本地存储与加载功能。这不仅适用于语言设置,还可以扩展到其他用户偏好和应用场景。
Last modified: Monday, 13 January 2025, 3:13 PM