走进HTML5-学习他带来的客户端存储

Lambda_
217 阅读5分钟

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等

在前端开发过程中，为了方便服务器更方便的交互或者提升用户体验，我们会在客户端(用户)的本地保存一部分数据，比如cookie/Storage。在设备不能上网的情况下，我们可以通过使用本地存储是的程序正常运行。

开发离线 Web 应用需要几个步骤，首先是确保应用知道设备能否上网，再做出下一步操作。最好有一块本地存储的数据，无论设备能否上网，都不妨碍读写。

HTML5 及其相关的 API 让离线开发应用成为了现实。

离线检测

要知道设备是否在连网状态，HTML5 定义了一个 navigator.onLine 属性，这个属性返回一个 Boolean 值。

  • 当为 true 时，表示设备处于在线状态(能上网)
  • 当为 false 表示当前设备处于离线状态(不能上网)
if (navigator.onLine) {
  // 在线 正常工作
} else {
  // 离线 执行离线任务
}

由于 navigator.onLine 存在一定的兼容性问题，因此除了 navigator.onLine 属性之外，为了更好的确定网络是否可用，HTML5 还定义了两个事件 online 和 offline

window.addEventListener("online", function() {
  // 在线 正常工作
});

window.addEventListener("offline", function() {
  // 离线 执行离线任务
});

在实际应用中，最好在页面加载后，先取得应用的状态，然后通过上述两个事件执行后续的函数。

客户端存储

在常见的前端开发过程中，大家常用的就是 Cookie、LocalStorage、SessionStorage。这里就为大家来总结一下这三种存储方式的异同点，如有错误，欢迎指正。

三者异同点

  • 相同点

    • 三者都是通过键值对的集合进行存储
    • 三者都会在浏览器中进行保存，并且有大小、同源策略的限制

  • 不同点

    • 主要用途不同
      • Cookie 主要用于标识用户 ID
      • Web Storage 主要用于浏览器存储数据
    • 操作频率不同
      • 一般不会频繁的操作 Cookie
      • 但是会频繁操作 Web Storage
    • 存储容量不同
      • Cookie 大小一般为 4k 左右
      • Web Storage 每个源支持 5MB 左右
    • 请求方式不同
      • Cookie 通过 HTTP 请求
      • Web Storage 由脚本提交
    • 有效期不同
      • Cookie 可以设置有效期，在当前有效期内有效
      • SessionStorage 在当前页面关闭前有效
      • LocalStorage 永久有效，直到通过脚本或者清除缓存来清除它
    • 页面能否共享
      • SessionStorage 不能共享
      • LocalStorage 在同源文档中可以共享
      • Cookie 在同源，且在 path 规则下文档共享
    • 拥有的 API 不同
      • Cookie 通过 document.cookie 设置和读取 cookie
      • Storage 通过 localStorage.name = 'lambda'存储单个值
        • 通过 localStorage.info = JSON.stringify({name:'lambda',gender: 'man'}) 来存储一个对象

Cookie

Cookie 可以用来做什么

Cookie 是一种存储在用户电脑上用来记录一些有状态的信息(小数据)

  • 记录购物车中商品的 ID
  • 记录用户登陆的账号密码(记住密码功能)

由于 Cookie 的大小限制，对于较复杂的需求 Cookie 是满足不了的

如果您需要更多的了解 Cookie 可以查看 Cookie 和 Session

Web Storage

Web Storage 的目的时客服由 Cookie 带来的限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器，Web Storage 的两个主要目标是：

  • 提供一种在 Cookie 之外存储会话数据的路径
  • 提供一种存储大量可以跨会话存在的数据的机制

Web Storage 中定义了两种对象: SessionStorage 和 LocalStorage，是 Storage 对象的示例。

Storage 对象的 API

  • Storage.length: 返回存储的数据项数量
  • Storage.key(keyIndex)：取得对应索引的键名
  • Storage.getItem(keyName)：取得对应键名的值
  • Storage.setItem(keyName,keyValue)：增加或更新一个数据项
  • Storage.removeItem(keyName)：删除对应键名的数据项
  • Storage.clear()：清空所有存储的数据项

总结

特性 Cookie LocalStorage SessionStorage
数据的生命周期 一般由服务器生成，可设置失效时间
如果在浏览器端生成Cookie，默认是关闭浏览器后失效		 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后清除
存放数据大小 4k左右 一般为5MB
与服务器端通信 每次都会携带在HTTP请求头中，如果Cookie保存过多的数据会带来性能问题 仅在客户端(即浏览器中保存，不参与和服务器的通信)
易用性 需要程序员自己封装，原生的Cookie接口不好用 原生接口可以接受，亦可再次封装Object和Array有更好的支持

希望对读完本文的你有帮助、有启发，如果有不足之处，欢迎批评指正交流！

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等

辛苦整理良久，还望手动点赞鼓励~

'摘抄'不是单纯的“粘贴->复制”，而是眼到，手到，心到的一字一句敲打下来。

博客声明:所有转载的文章、图片仅用于作者本人收藏学习目的，被要求或认为适当时，将标注署名与来源。若不愿某一作品被转用，请及时通知本站，本站将予以及时删除。

avatar
文章
阅读
粉丝