常见的浏览器存储主要有:
1.属于文档对象模型:documentcookie,
2.属于浏览器对象模型localStorage,sessionStorage,indexDB

Cookie

h5之前,存储主要用cookies,缺点是在请求头上带着数据,导致流量增加。大小限制4k

localStorage

以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。IE8+支持,每个域名限制5M

sessionStorage

sessionStorage操作的方法与localStroage是一样的,区别在于sessionStorage在关闭页面后即被清空,而localStorage则会一直保存。很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage就比较方便。

注意,刷新页面sessionStorage不会清除,但是打开同域新页面访问不到

indexDB​​​​​​​

为了弥补cookie的局限性,HTML5中新增了本地存储的解决方案:Web Storage(localStorage和sessionStorage)。

indexedDB是没有存储上限的(一般来说不会小于250M)。它不仅可以存储字符串,还可以存储二进制数据。

区别:

  1. cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
  2. 存储大小限制不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
  3. 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
  4. 作用域不同,sessionStorage不在不同的浏览器页面中共享,即使是同一个页面;localStorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
  5. Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
  6. Web Storage 的api接口使用更方便,cookie的原生接口不友好,需要自己封装。

浏览器的储存方式有哪些相关推荐

  1. 浏览器存储的方式有哪些

    浏览器存储的方式有哪些 补充:cookie 原本并不是用来储存的,而是用来与服务端通信的,需要存取请自行封装 api. 而 localStorage 则自带 getItem 和 setItem 方法, ...

  2. 关系型数据库到HBase的数据储存方式变迁

    如今Bigtable型(列族)数据库应用越来越广,功能也很强大.但是很多人还是把它当做关系型数据库在使用,用原来关系型数据库的思维建表.存储.查询.本文以hbase举例讲述数据模式的变化. 传统关系型 ...

  3. 图的储存方式,链式前向星最简单实现方式 (边集数组)

    对于图来说,储存方式无非就是邻接矩阵.邻接表,今天看了看链式前向星的储存方式,说来说去不还是链表,是一种链表的简单的实现方式,还是比较好理解的.看他们写个结构体,个人不喜欢,没必要,也嫌麻烦,换一种更 ...

  4. localStorage.getItem 往浏览器里面储存数据到本地localStorage

    借鉴https://blog.csdn.net/aaa333qwe/article/details/79025336 往浏览器里面储存数据 localStorage.setItem('todos', ...

  5. Android下的数据储存方式(三)

    Android下最好的数据储存方式:关系型数据库sqlite. 数据库的创建:使用SqliteOpenHelper类 结合SqliteOpenHelper类和SQLiteDatabase类的帮助,我们 ...

  6. 巴里克黄金CEO:加密货币并不是比黄金更好的价值储存方式

    据新浪财经消息,全球最大黄金生产商巴里克黄金公司CEO马克-布里斯托(Mark Bristow)周四驳斥了加密货币是比传统黄金更好的价值储存方式的观点. 比特币牛派认为,这种数字货币的有限供应及其令人 ...

  7. 【数据结构和算法笔记】:图的储存方式(邻接矩阵,邻接表)

    邻接矩阵: 顶点i,j之间有边,则A[i][j]=1或者边的权值, 否则等于0(不带权图)或者无穷(带权图) 例: 无向图的邻接矩阵: 例:有向图的邻接矩阵: 特点: 邻接表: 邻接表占用空间: 无向 ...

  8. 存数组元素的个数_HashMap1.8之后为什么要采用数组+链表+红黑树的储存方式?

    HashMap概述 HashMap是基于Map接口实现的,采取(key,value)的储存方式.其中key和value可以为空,但是key不能重复.下面我们来详细解读一下HashMap的底层实现原理. ...

  9. 负数在计算机中的储存方式

    最近在学习位运算符时,发现负数在做带符号位的右移运算符时,结果与想象中的大不一样,经过查阅资料之后发现,原来这一切源自负数在计算机中的储存方式 负数在计算机中是以补码的形式储存的 注意: 本文为了简化 ...

最新文章

  1. Linux系统下配置Java环境
  2. PostgreSQL的ecpg程序的调适与运行
  3. python(matplotlib9)——animation动画
  4. There is no tracking information for the current branch
  5. java io 机器名_java IO最让初学者误解的取名方式
  6. leetcode题解677-键值映射
  7. c语言链表末尾怎么插入数据,在链表中插入数据!求助!!!
  8. 吴恩达《机器学习》第十一章:机器学习系统的设计
  9. 蓝桥杯 ALGO-52 算法训练 排列问题
  10. 如何完整离线保存网页,包括网页完整特效?
  11. 《遥感原理与应用》孙家抦版知识点总结(含简答题)——第六章
  12. webstorm配置vue模板 webstorm快速生成vue模板
  13. 分析 2017年淘宝天猫活动时间安排
  14. VMware虚拟机nat模式详解
  15. 什么是 VxLAN?
  16. 蓝桥杯Python快速入门(4)
  17. php 解析md文件格式,Git中Read.MD文件格式:Markdown语言详解
  18. 与高校同行,华为人工智能课程套件揭秘 | 华为昇腾师资培训沙龙成都场
  19. 判断file是否存在的方法
  20. UA OPTI570 量子力学20 量子谐振子模型中量子态的相干性

热门文章

  1. 推出 BlazePose:实现设备端实时人体姿态追踪
  2. c语言实验作业在dev蜗居的思路,C语言程序设计实验(共5篇)
  3. 从有道云笔记迁移到另一个有道云笔记账号
  4. MATLAB基础编程(004-01)在不同初速度和重力加速度下的的动态抛物运动绘图
  5. 建筑BIM的使用场景
  6. 75佳精美的 CSS 网页设计作品欣赏(系列一)
  7. 别让你的mongodb宕机了
  8. python四六级英语在线考试系统django337
  9. ansible的使用
  10. 外卖骑手困在算法,美团困在了利益中