使用 LocalStorage 提升前端体验

embedded/2024/9/22 16:40:08/

使用 LocalStorage 提升前端体验

在这个项目（www.studytool.site）中，本地缓存 (localStorage) 作为一种持久化存储机制，被广泛应用于用户设置和数据保存，确保用户在刷新页面或关闭浏览器后，仍然能够保留自定义的偏好和进度。以下是本地缓存在该项目中的几个关键应用场景：

1. 字体设置的缓存

用户可以在播放器中调整字幕的字体大小（超大、大、中、小），系统会将这些设置保存到 localStorage 中，以便下次访问时能够自动加载之前的字体大小设置。通过以下代码，系统能够持久化用户的字体选择：

localStorage.setItem(LOCAL_STORAGE_KEY_FONT_SIZE, selectedValue);
localStorage.getItem(LOCAL_STORAGE_KEY_FONT_SIZE);

这样，字体设置在页面刷新后仍然有效。

2. 字幕显示与隐藏状态缓存

用户可以选择显示或隐藏字幕、译文和收藏的句子列表。每次用户切换这些选项时，系统会将状态保存到 localStorage，例如：

localStorage.setItem(LOCAL_STORAGE_KEY_IS_SHOW_CAPTION, captionsVisible);  // 保存字幕显示状态
localStorage.setItem(LOCAL_STORAGE_KEY_IS_SHOW_TRANSLATION, captionsTranslationVisible);  // 保存译文显示状态
localStorage.setItem(LOCAL_STORAGE_KEY_IS_SHOW_FAVORITE, favoriteListVisible);  // 保存收藏列表显示状态

这样，当用户重新加载页面时，系统能够根据缓存的状态决定是否显示这些内容。

3. 收藏句子的保存

当用户选择将某些句子标记为需要重复或收藏时，系统会将这些收藏句子的索引保存在 localStorage 中。通过以下函数，收藏的句子列表被存储并加载：

saveToLocalStorage(repeatedSentences);  // 保存收藏句子
loadFromLocalStorage();  // 加载已保存的收藏句子

这样用户可以方便地回顾已收藏的内容。

4. 自动播放下一句功能

播放器支持自动播放下一句字幕。该选项的开启与关闭状态会存储在 localStorage 中，确保用户在关闭浏览器后重新打开时，依旧保持之前的播放设置：

localStorage.setItem(LOCAL_STORAGE_KEY_IS_AUTO_PLAY_NEXT, isAutoPlayNext);

5. 已完成内容的标记

允许用户标记某篇文章为“已完成”，并将该信息保存在 localStorage 中的 completedArticles 列表中。每次用户标记或取消标记时，系统会更新本地缓存：

localStorage.setItem(LOCAL_STORAGE_KEY_COMPLETED, JSON.stringify(completedArticles));

6. 缓存字幕和有效期机制

为了提升页面加载性能，项目实现了字幕文件的缓存，并设置了缓存有效期。使用 setItemWithExpiry 函数，字幕文件会存储在 localStorage 中，并设置缓存有效期（如60分钟）。如果缓存过期，系统将重新请求数据：

setItemWithExpiry(`subtitles_${articleValue}`, subtitles, CACHE_EXPIRY);

总结

在这个项目中，localStorage 通过缓存用户的自定义设置（如字体大小、字幕显示状态等）、保存用户交互结果（如收藏句子、完成状态等），以及缓存常用数据（如字幕内容），极大地提升了用户体验和系统的响应速度。这种方式适用于需要保存用户设置及数据的小型应用场景，而无需复杂的后端支持。

需要注意的是，localStorage 的数据存储上限为5MB，且不应存储敏感信息。