JavaScript localStorage 与 sessionStorage 详解

storage

Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。
属性：Storage.length 只读。返回一个整数，表示存储在 Storage 对象中的数据项数量。
Storage.key()：该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。
Storage.getItem()：该方法接受一个键名作为参数，返回键名对应的值。
Storage.setItem()：该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。
Storage.removeItem()：该方法接受一个键名作为参数，并把该键名从存储中删除。
Storage.clear()：调用该方法会清空存储中的所有键名

localStorage

与 sessionStorage 区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。

sessionStorage

被存储的键值对总是以 UTF-16 DOMString 的格式所存储，其使用两个字节来表示一个字符。对于对象、整数 key 值会自动转换成字符串形式。
各个标签页的 sessionStorage 是独立的。
在 a 标签页写入修改删除 sessionStorage ，不会影响到已经打开的标签页中的 sessionStorage 。
通过 window.open,window.location,windows.history 打开当前标签页 sessionStorage 会传递到新页面。
通过按住 ctrl 键打开新标签页，或者右键菜单打开新标签页，新窗口，当前标签页的 sessionStorage 是不会传递到新页面的。
关闭某个标签页，该标签页的 sessionStorage 会被销毁。不影响其他标签页或者窗口。
在某个标签页即使跳出了当前站点，返回来的时候，sessionStorage 也还在的。
测试用列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script
      type="text/javascript"
      src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"
    ></script>
  </head>
  <body>
    <a href="./storage.html">利用 a 标签在当前tab跳转</a>
    <br />
    <a href="./storage.html" target="_blank">利用 a 标签打开一个新 tab</a>
    <br />
    <a href="./storage.html" target="_blank" rel="opener">
      a 标签添加rel=opener跳转
    </a>
    <br />
    <span onclick="window.open('./storage.html')">window.open跳转</span>
    <br />
    <span onclick="window.location.href = './storage.html'">
      window.location.href
    </span>
    <br />
    <span onclick="sessionStorage.setItem('lastname', Math.random());">
      更改 storage
    </span>
    <script>
      sessionStorage.setItem('lastname', 'Smith');
      setInterval(() => {
        console.log(sessionStorage.getItem('lastname'));
      }, 1000);
    </script>
  </body>
</html>