localStorage和sessionStorage

October_l
942 阅读3分钟

localStorage和sessionStorage都是html5的Web API。

sessionStorage

sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，这点和 session cookies 的运行方式不同。

localStorage

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

一 两者的共同点

  1. 存储大小约为5M左右
  2. 都有同源策略限制
  3. 仅在客户端中保存，不参与和服务器的通信

二 两者的不同点

  1. 生命周期 —— 数据可以存储多少时间

    • localStorage: 存储的数据是永久性的，除非用户人为删除否则会一直存在。
    • sessionStorage: 与存储数据的脚本所在的标签页的有效期是相同的。一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删除。

  2. 作用域 —— 谁拥有数据的访问权

    • localStorage: 在同一个浏览器内，同源文档之间共享 localStorage 数据，可以互相读取、覆盖。
    • sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此，sessionStorage 的作用域还被限定在了同一个页面会话中，也就是说，只有同一浏览器、同一页面会话中的的同源文档才能读取、覆盖数据。

为了更好的理解sessionStorage,我们来看个例子： 创建两个html文件，分别为a.html、b.html。

a.html文件中写下列内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sessionStorage</title>
</head>
<body>
    <script>
        window.sessionStorage.setItem('title','今日头条')
    	window.localStorage.setItem('address','china')
        console.log(sessionStorage.getItem('title'))   // 今日头条
    	console.log(localStorage.getItem('address'))  // china
    </script>
</body>
</html>

b.html文件中写下列内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>localStorage and localStorage</title>
</head>
<body>
    <script>
        console.log(sessionStorage.getItem('title'))  // null
        console.log(localStorage.getItem('address'))  // china
    </script>
</body>
</html>

可以看到 sessionStorage 中存储的数据只在b.html文件中才可以读取，a.html 文件中无法读取，即 sessionStorage 只在a.html建立的会话中有效；而 localStorage 中存储的数据在 a.html 和 b.html中都可以获取到。

avatar
文章
阅读
粉丝