【问题标题】:HTML5 Local storage vs. Session storageHTML5 本地存储与会话存储
【发布时间】:2011-07-28 05:53:42
【问题描述】:

除了非持久性和仅限于当前窗口之外,会话存储是否比本地存储有任何好处(性能、数据访问等)?

【问题讨论】:

标签: javascript html local-storage session-storage


【解决方案1】:

localStoragesessionStorage 都扩展了 Storage。除了sessionStorage的预期“非持久性”之外,它们之间没有区别。

也就是说,存储在localStorage 中的数据会一直存在,直到被明确删除。所做的更改会保存下来,可供所有当前和将来访问该网站的用户使用。

对于sessionStorage更改仅适用于每个标签。所做的更改将保存并可供当前页面在该标签中使用,直到它关闭。一旦关闭,存储的数据就会被删除。

【讨论】:

  • 这里有更广泛的讨论,您可能会发现这里有帮助:stackoverflow.com/questions/19867599/…
  • 如果你将一些数据保存在http下的存储中,你将无法在https上检索它
  • 我在 Chrome v41.x 上对此进行了测试,似乎上述关于 https 的说法不正确:localStorage 保留其存储的数据。
  • SessionStorage 在页面重新加载和恢复后仍然存在,但打开新选项卡/窗口将启动新会话。
【解决方案2】:

唯一的区别是 localStorage 有不同的过期时间,sessionStorage 只能在创建它的窗口打开时访问。
localStorage 会一直持续到您将其删除或用户将其删除。
假设您想保存一个登录用户名和密码,出于安全原因(即另一个人稍后访问他们的帐户),您想使用sessionStorage而不是localStorage
但是,如果您想在他们的机器上保存用户的设置,您可能需要localStorage。总而言之:

localStorage - 长期使用。
sessionStorage - 当您需要存储变化的东西或临时的东西时使用

【讨论】:

    【解决方案3】:

    其他几点可能有助于理解本地存储和会话存储之间的差异

    1. 本地存储和会话存储的范围都是文档来源,所以

      https://mydomain.com/
      http://mydomain.com/
      https://mydomain.com:8080/

      以上所有网址将共享相同的存储空间。 (网页的通知路径不影响网页存储)

    2. 即使对于在不同选项卡中打开具有相同来源策略的文档,会话存储也不同,因此在两个不同选项卡中打开相同网页不能共享相同会话存储。

    3. 本地和会话存储也由浏览器供应商限定。所以 IE 保存的存储数据不能被 Chrome 或 FF 读取。

    希望这会有所帮助。

    【讨论】:

    • 不,http 和 https 之间的 sessionStorage 共享相同,但 localStorage 不是。
    • 如果你先在 https 源中设置 sessionStorage,它将在 http 中可用,但如果你在 http 中创建 sessionStore,则在 http 中不可用
    • @Shahdat,您的意思是“然后将无法在 https 中使用”(注意 s)?
    • @DanielWerner 是的,如果您在 http 中创建 sessionStore,那么在 https 中将不可用。
    【解决方案4】:

    localStoragesessionStorage 之间的主要区别在于 sessionStorage 在每个选项卡中都是唯一的。如果关闭选项卡,sessionStorage 将被删除,localStorage 不会。你也不能在标签之间进行通信:)

    另一个细微的区别是,例如在 Safari (8.0.3) 上,localStorage 有 2551 k 个字符的限制,但sessionStorage无限存储空间

    在 Chrome (v43) 上,localStoragesessionStorage 都限制为 5101 k 个字符(正常/隐身模式之间没有区别)

    在 Firefox 上,localStoragesessionStorage 都限制为 5120 k 个字符(正常/私人模式之间没有区别)

    速度没有任何区别:)

    Mobile Safari 和 Mobile Chrome 也有问题,隐私模式 Safari 和 Chrome 的最大空间为 0KB

    【讨论】:

    • 限制为 5101 k 个字符?所以.. 510.1 万个字符?
    • @Zze 是的,1 个字符通常是 1 个字节,因此 500 万个字符相当于 5Mb 的存储空间。
    • @BasimKhajwal 那是 5MB。字节,而不是位。
    • 您能在您提到的内容中添加来源吗?
    • @Mukus,没有来源,我自己进行了测试,并且私人模式 Safari 有一个问题,因为它有 localStorage 但那里没有空间,而且我的 polyfill 不会触发,因为 localStorage 存在,但是脚本失败,因为它无法在那里存储任何内容。您也可以使用此工具进行测试 - dev-test.nemikor.com/web-storage/support-test
    【解决方案5】:

    sessionStoragelocalStorage 相同,只是它只存储一个会话的数据,并且当用户关闭创建它的浏览器窗口时,它将被删除。

    【讨论】:

    • 您的意思是 tab 而不是 window
    【解决方案6】:

    在性能方面,我的(粗略)测量发现 1000 次写入和读取没有差异

    安全方面,直觉上看来 localStore 可能会在 sessionStore 之前关闭,但没有具体证据 - 也许其他人会这样做?

    功能方面,同意上面的 digitalFresh

    【讨论】:

    • 关于页面加载性能: sessionStorage 和 localStorage 都是在页面加载渲染周期中启动和填充的。因此,在浏览器中无法测量初始页面加载时间的损失。
    【解决方案7】:

    是的,会话存储和本地存储在行为上是相同的,除了本地存储将存储数据,直到并且除非用户删除缓存,cookie 和会话存储数据将保留在系统中,直到我们关闭会话,即直到我们关闭会话存储创建窗口。

    【讨论】:

      【解决方案8】:

      在我看来,会话存储相对于本地存储的优势在于它在 Firefox 中具有unlimited capacity,并且不会持续超过会话。 (当然这取决于你的目标是什么。)

      【讨论】:

        【解决方案9】:
        • sessionStorage 为每个给定源维护一个单独的存储区域,该区域在页面会话期间可用(只要浏览器处于打开状态,包括页面重新加载和恢复)

        • localStorage 做同样的事情,但即使在浏览器关闭并重新打开时仍然存在。

        我是从Web Storage API那里得到的

        【讨论】:

          【解决方案10】:

          本地存储:它保持存储用户信息数据,没有过期日期,当用户关闭浏览器窗口时,这些数据不会被删除,它可以用于日、周、月和年。 p>

          //Set the value in a local storage object
          localStorage.setItem('name', myName);
          
          //Get the value from storage object
          localStorage.getItem('name');
          
          //Delete the value from local storage object
          localStorage.removeItem(name);//Delete specifice obeject from local storege
          localStorage.clear();//Delete all from local storege
          

          会话存储:与本地存储日期相同,只是它会在网络用户关闭浏览器窗口时删除所有窗口。

          //set the value to a object in session storege
          sessionStorage.myNameInSession = "Krishna";
          

          阅读更多Click

          【讨论】:

            【解决方案11】:

            迟到的答案,但觉得在这里补充几点。

            会话存储将可用于特定选项卡,我们可以通过浏览器使用本地存储。两者都默认同源,我们也可以使用键值对手动存储值(值必须是字符串)。

            一旦浏览器的选项卡(会话)关闭,则该选项卡上的会话存储将被清除,对于本地存储,我们需要 明确清除。最大存储限制分别为5MB10MB

            我们可以像下面这样保存和检索数据,

            保存:

            sessionStorage.setItem('id', noOfClicks);   // localStorage.setItem('id', noOfClicks);
            
            sessionStorage.setItem('userDetails', JSON.stringify(userDetails));   // if it's object
            

            获取:

            sessionStorage.getItem('id');    // localStorage.getItem('id');
            
            User user = JSON.parse(sessionStorage.getItem("userDetails")) as User;  // if it's object
            

            修改:

            sessionStorage.removeItem('id');    // localStorage.removeItem('id');
            
            sessionStorage.clear();   // localStorage.clear();
            

            PS: getItem() 也将数据作为字符串返回,我们需要将其转换为JSON 格式 如果是对象则访问。

            您可以在此处阅读有关浏览器存储的更多信息..

            1. Difference between localStorage, sessionStorage and cookies

            2. localstorage-vs-sessionstorage

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2011-03-01
              • 2020-12-26
              • 1970-01-01
              • 2011-07-20
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多