前端常用存储总结

2019-10-08  本文已影响0人  LazzMan

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
跨域不共享
上一篇 下一篇

猜你喜欢

热点阅读