美文网首页
前端常用存储总结

前端常用存储总结

作者: LazzMan | 来源:发表于2019-10-08 09:08 被阅读0次

cookie

结论:

最大存储4KB数据。
理论上支持同一内核浏览器共享(Chrome与IE不共享),域共享范围(最大域范围为一级域内,强制写成顶级域或者. *会被浏览器视为无效cookie销毁)取决于domainpath,销毁时机取决于expire,如果expire值为session或者是一个过期的日期,表示该cookie在浏览器关闭时(而非标签页关闭)销毁,但此时仍然是有效cookie,每次请求依旧会传递后端

举例:

  1. Chrome中打开标签页,访问http://zhidao.baidu.com/,打开F12控制台,Application中Cookies中添加新的Cookie,注意domain.zhidao.baidu.comexpireSession
百度知道页面手动添加的Cookie
  1. Chrome中新建标签页,访问https://news.baidu.com,打开F12控制台,Application中Cookies中添加新的Cookie,注意domain.baidu.comexpire2038-01-17T23:59:58.000Z
百度新闻页面手动添加的Cookie
  1. 对比两个控制台Cookie值,由此可知domain值决定cookie域的共享范围
domain决定共享域范围
  1. 再打开1个Chrome浏览器,访问https://zhidao.baidu.com,打开F12控制台,查看Application中Cookies。Cookie支持跨浏览器共享
跨浏览器共享Cookie
  1. 关闭所有chrome浏览器,重新打开chrome浏览器,访问https://zhidao.baidu.com,打开F12控制台,查看Application中Cookies。expire值决定cookie的销毁时机
expire决定cookie的销毁时机

sessionStorage

结论:

最大存储5MB数据。
同一浏览器标签页且同一域共享,标签页关闭时自动销毁。

举例:

  1. Chorme中打开标签页,访问http://news.baidu.com/,打开F12控制台,console中执行如下命令sessionStorage.setItem('test',111);,查看Application中Session Storage中存储值。

    百度新闻页面 Session Storage
  2. 在当前标签页,输入网址https://zhidao.baidu.com/,打开F12控制台,查看Application中Session Storage中存储值。由于跨域,sessionStorage不会共享。

    百度知道页面 Session Storage
  3. 在当前标签页,输入网址http://news.baidu.com/,打开F12控制台,查看Application中Session Storage中存储值。在同一浏览器标签页内,标签页不关闭,sessionStorage就不会销毁。

    百度新闻页面 Session Storage
  4. Chorme中新建标签页,输入网址http://news.baidu.com/,打开F12控制台,查看Application中Session Storage中存储值。不同浏览器标签页,同一域名不会共享sessionStorage

    新建标签页的百度新闻页面 Session Storage
  5. 关闭第1-3步使用的标签页,新建标签页,访问http://news.baidu.com/,打开F12控制台,查看Application中Session Storage中存储值。sessionStorage在浏览器标签页关闭后即销毁

    关闭标签页后新建标签页的百度新闻页面 Session Storage

localStorage

结论:

最大存储5MB数据。
同一浏览器内跨标签页且同域内共享,销毁取决于编码人员自己移除。

举例:

  1. Chorme中打开标签页,访问http://news.baidu.com/,打开F12控制台,console中执行如下命令localStorage.setItem('test',111);,查看Application中Local Storage中存储值。
百度新闻页面 Local Storage
  1. 新建标签页,访问http://news.baidu.com/,打开F12控制台,查看Application中Local Storage中存储值。同一浏览器内同域时,跨标签页共享
同一浏览器共享
  1. 新建标签页,访问http://zhidao.baidu.com/,打开F12控制台,查看Application中Local Storage中存储值。跨域不共享localStorage
跨域不共享

相关文章

  • 前端常用存储总结

    cookie 结论: 最大存储4KB数据。理论上支持同一内核浏览器共享(Chrome与IE不共享),域共享范围(最...

  • 前端知识个人总结链接

    各类全总结 常用全总结 链接 全栈练习 链接 前端面试知识总结 链接 工作其它知识学习 链接 前端优化 前端优化 ...

  • cookie、session、sessionStorage、lo

    今天总结前端数据存储的几种方式 cookiesessionsessionStoragelocalStorage 首...

  • JavaScript常用数组操作方法(含ES6)

    前端开发数组最常用了,一般的数据存储,点阵图像的存储等等,常用的方法有filter, map, reduce等,功...

  • 前端数据存储之IndexedDB

    IndexedDB 一、关于前端数据存储常用的几个方案 Cookie Web Storage IndexedDB ...

  • 前端存储方案总结

    昨天接了电话面试,面试前端的,面试官问了一下cookie和session的区别,当时回答的session是用于服务...

  • HTML本地存储

    本地存储,即在用户浏览器中将数据保存在本地。 以下是常用的前端数据存储的几种方式: cookiesessionlo...

  • 四、备份容灾技术

    备份 常用备份拓扑 存储网络主要分为前端业务网以及后端的存储网络,业务网主要受理用户的请求,后端存储网主要用户数据...

  • iOS 数据持久化

    很早以前就想总结一下iOS数据存储的相关知识,今天得空总结如下: iOS常用的存储方式 1、偏好设置Prefere...

  • JavaScript

    前端 优化策略-自查表 前端性能优化常用总结鸟瞰前端 , 再论性能优化 跨域,你需要知道的全在这里内存分析与内存泄...

网友评论

      本文标题:前端常用存储总结

      本文链接:https://www.haomeiwen.com/subject/vokructx.html