带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage（3）

带你读《现代Javascript高级教程》十九、详解Cookie, Session, SessionStorage, LocalStorage（2）https://developer.aliyun.com/article/1349543?groupCode=tech_library

4. 什么是LocalStorage？

属性

LocalStorage是一种在客户端存储持久性数据的机制。LocalStorage具有以下属性：

• 存储位置：LocalStorage数据存储在客户端的持久化介质中，与浏览器相关联。
  
• 持久性：LocalStorage数据不受会话结束或浏览器关闭的影响，会一直保留在浏览器中，除非被显式删除。
  
• 域和协议限制：LocalStorage数据只能在同一域和协议下访问。
  

应用场景

LocalStorage在Web开发中有多种应用场景，包括：

• 本地数据存储：LocalStorage可用于在客户端存储持久性数据，如用户首选项、缓存的数据等。
  
• 离线应用：LocalStorage可用于存储离线应用所需的资源，例如HTML、CSS和JavaScript文件，以实现离线访问能力。
  
• 单页应用状态管理：在单页应用中，可以使用LocalStorage来存储和管理应用的状态，例如当前选中的标签、展开/收起的面板等。
  

以下是一个使用JavaScript操作LocalStorage的示例：

// 设置LocalStorage
localStorage.setItem("username", "John Doe");
// 读取LocalStorageconst username = localStorage.getItem("username");
console.log(username);

5. Cookie vs. Session vs. SessionStorage vs. LocalStorage

Cookie、Session、SessionStorage和LocalStorage都是常见的Web存储解决方案，每种方案都有其适用的场景和特点。

• 使用Cookie可以在客户端存储数据，适用于存储会话标识符、用户首选项和追踪用户行为等场景。
  
• Session用于在服务器端存储和管理用户的会话状态，适用于身份验证、购物车和个性化设置等场景。
  
• SessionStorage用于在浏览器会话期间存储临时数据，适用于传递数据、保存表单数据和单页应用状态管理等场景。
  
• LocalStorage用于在客户端存储持久性数据，适用于本地数据存储、离线应用和单页应用状态管理等场景。
  

根据具体的需求和场景，选择合适的存储方案可以更好地管理和使用数据。

6. 参考资料

• MDN Web Docs - HTTP Cookiesopen in new window
  
• MDN Web Docs - Web Storage APIopen in new window
  
• MDN Web Docs - SameSite attributeopen in new window
  
• MDN Web Docs - HttpOnly attributeopen in new window
  
• W3Schools - JavaScript Cookiesopen in new window
  
• W3Schools - HTML Web Storage Objects