Web存储-------localStorage和seccionStorage详解

使用场景： Web应用允许使用浏览器提供的API实现将数据存储到用户电脑上。这用客户端存储遵循“同源策略”，因此不同站点的页面是无法相互读取对方存储的数据，而同一站点的不同页面之间是可以相互共享存储数据的，它为我们提供了一种通信机制，例如，一个页面填写的表单数据可以显示在另一个页面中。Web应用可以选择存储数据的有效期：临时存储可以让数据保存至当前窗口关闭或者浏览器退出；永久存储可以将数据永久存储在硬盘上。客户端存储的方式之一就是Web存储

Web存储

Window对象上有两个属性：localStorage和seccionStorage，这两个属性都代表同一个Storage对象——–一个持久化关联数组，即可以使用字符串来索引，存储的值也是字符串形式的。localStorage和seccionStorage的区别在于：两者的存储有效期和作用域的不同：数据可以存储多长时间以及谁拥有数据的访问权（即遵循同源策略）。

localStorage

localStorage的存储位置：由于localStorage不会因为关闭浏览器重启电脑消失，所以是存放在硬盘里面。阿里面试中曾经问到过： localStorage存放在操作系统哪个位置。这里有个链接描述了几个常见浏览器的存储位置
https://segmentfault.com/q/1010000009724117
最常见的Google Chrome（Window7）存储在
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Local Storage
代码实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web Storage 示例</title>
    <script>
    //localStorage 示例(可永久保存)
    function saveStorage(id){
        var target=document.getElementById(id);
        var str=target.value;
        localStorage.setItem("message",str);
        //或者localStorage.message=str;
    }
    function loadStorage(id){
        var target=document.getElementById("msg");
        var msg=localStorage.getItem("message");
        //或者var msg=localStorage.message;
        //或者var msg=localStorage["message"]
        target.innerHTML=msg;
    }
    </script>
</head>
<body>
<h1>Web Storage 示例</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存数据" onclick="saveStorage('input');" />
<input type="button" value="读取数据" onclick="loadStorage('msg');" />
</body>
</html>

结果截图：
1.在第一个页面中保持数据并读取数据
这里写图片描述
2.重新打开一个窗口，可以读取到数据上一个窗口中保存的数据

3.在重新打开一个窗口，这一次代码放在了另一个域名中，则读取不到数据

4.在本地文件中查看存储，请忽略由于读取文件的软件没选好而导致的乱码
这里写图片描述

seccionStorage

seccionStorage中的数据保存一个会话周期，即从打开浏览器到关闭浏览器窗口。此外，现代浏览器具备重新打开最近关闭的标签页随后恢复上一次浏览的会话功能，因此，这些标签页以及与之相关的seccionStorage的有效期可能会更加长些。
代码实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web Storage 示例</title>
    <script>

        //sessionStorage 示例  (保存一个会话周期:从打开浏览器——到关闭浏览器窗口)
        function saveStorage(id){
            var target=document.getElementById(id);
            var str=target.value;
            sessionStorage.setItem("message",str);
            //或者sessionStorage.message=str;
        }
        function loadStorage(id){
            var target=document.getElementById(id);
            var msg=sessionStorage.getItem("message");
            //或者var msg=sessionStorage.message;
            target.innerHTML=msg;
        }
    </script>
</head>
<body>
<h1>Web Storage 示例</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存数据" onclick="saveStorage('input');" />
<input type="button" value="读取数据" onclick="loadStorage('msg');" />
</body>
</html>

结果截图：
1.在第一个页面中保存数据并读取
这里写图片描述
2.重新打开一个窗口，无法读取到数据上一个窗口中保存的数据