深入了解浏览器存储(Cookie LocalStorage sessionStorage IndexedDB)

原文地址:https://segmentfault.com/a/1190000018748168
1 Cookie
Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加
密)。 cookie是服务端生成,客户端进行维护和存储.

Cookie的缺陷
1.1 Cookie 不够大 大小限制在4kb左右
1.2 每次请求都携带cookie 会造成性能浪费
1.3 http请求中cookie是明文,有安全问题
1.4 这个不是缺陷 自己的问题记录
以前尝试Document.cookie 获取cookie中的信息 一直获取不到,原因可能是Cookie设置了HttpOnly 的标记,设置了HttpOnly 标记的Cookie 是不允许直接通过js获取其中的内容的.
2 LocalStorage
特点
2.1 保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存
的数据。
2.2 大小为5M左右
2.3 仅在客户端使用,不和服务端进行通信
2.4 接口封装较好
LocalStorage 主要用来存储不变的数据,所有窗口共享数据
3 sessionStorage
特点
3.1 会话级别的浏览器存储,窗口关闭数据清除,多个窗口不共享数据.
3.2 大小为5M左右
3.3 仅在客户端使用,不和服务端进行通信
3.4 接口封装较好
4 IndexedDB
特点:
4.1 IndexedDB 是一个运行在浏览器上的非关系型数据库,存储空间大,一般来说不会
小于250M
4.2 键值对储存。
4.3 异步
IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,与
LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的
读写,拖慢网页的表现。
4.4 支持事务
4.5 同源限制
IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身
域名下的数据库,而不能访问跨域的数据库
4.6 支持二进制储存
IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和
Blob 对象)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   支持离线 Web 应用开发是 HTML5 的另一个重点。   所谓离线 Web 应用,就是在设备不能上网的情况...
    霜天晓阅读 1,092评论 0 2
  • 序 本文主要研究一下flink的ParallelIteratorInputFormat 实例 这里使用Execut...
    go4it阅读 414评论 0 0
  • 大海正呼唤着谁 那是沙漠里的一点绿 可大海会越来越小吗 直至被沙漠吞噬 不会的 不会的 我坚信 犹如狂风暴雨而至 ...
    Ling_00阅读 254评论 0 2