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

前端常用存储总结

作者: 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
    跨域不共享

    相关文章

      网友评论

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

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