一、HTML 本地存储localStorage

1. localStorage的使用

localStorage不受浏览器窗口进程的限制，只要使用localStorage保存的数据，即使在新打开的浏览器窗口或者浏览器关闭后，数据依然存在。

网站在页面加载完毕后可以通过JavaScript来获取这些数据。要注意的是，在不同的浏览器中localStorage存储的数据是不能相互访问的，比如在Firefox中的localStorage存储的数据，是不能在IE或者Chrome中访问读取的。

判断是浏览器是否支持localStorage：

<script>
    function support_storage() {
        if (window.localStorage){
            alert("true")
        }else {
            alert("false")
        }
    }
    window.onload=function () {
        support_storage()
    }
</script>

2. localStorage的应用场合

使用localStorage存储的场合非常多，比如当一个在线的任务，需要用户填写大量的表单和数据，并且在指定的时间间隔后，才把这些数据发送到服务端。

在线购物时，用户的购物车，使用localStorage可以在购物车中保存更多的数据，等用户下次再登录时，购物车中的数据依然是存在的。或者开发的离线应用程序，用户在离线状态下把数据填写好，等在线的时候，再一次性把数据进行提交。

3. localStorage的创建和使用方法

每个localStorage对象都可以存储一系列key/value变量，key可看作变量名，value可看作变量值，使用JavaScript可以轻松地对key/value变量进行操作，常见的操作方法如下：

localStorage.length：返回限制已经存储的变量的个数。

localStorage.key(i)：返回第i个变量的键(key)。

localStorage.getItem(key)：和**localStorage.key(i)**一样，取得键为key的变量的值(读取数据)。

localStorage.setItem(key,value)：和localStorage.key=value一样，设置键为key的变量值(保存数据)。

**localStorage.removeItem(key)：**删除键为key对应的变量。

**localStorage.clear()：**清空所有变量。

示例：

<script>
    function support_storage() {
        localStorage.setItem(1, "hello1")
        localStorage.setItem(2, "hello2")
        localStorage.setItem(3, "hello3")
        alert("本地存储的localStorage个数：" + localStorage.length)
        alert("返回第2个变量的键(key)：" + localStorage.key(2))
        alert("获取键为1对应的value：" + localStorage.getItem(1))
        // localStorage.removeItem(1)
        // localStorage.clear()
    }
    window.onload = function () {
        support_storage()
    }
</script>

4. localStorage存储特殊类型

Web Storage不是只能处理字符串吗？那么如何存储复杂对象数据呢？

1.可以使用json对象来存储复杂对象的数据

2.利用json对象的stringify()方法，将复杂对象转变成字符串，存入Web Storage中。当Web Storage中读取时，可以通过json对象的parse()方法再转换成json对象

示例1：

<script>
  window.onload = function() {
    var jsonstr = {
      "id" : "1",
      "name" : "张三"
    };
    var jsonValue = JSON.stringify(jsonstr);//将JSON对象转换成字符串
    alert(jsonValue);
    localStorage.setItem(jsonstr.id, jsonValue);
    var jsondata=localStorage.getItem("1");
    var jsonObject=JSON.parse(jsondata);//将localStorage中的json字符串转换到JSON对象
    alert(jsonObject.name);
  }
</script>

示例2：

<script>
    window.onload = function() {
    }
    function save() {
        var name = document.getElementById("name").value;
        var mobile = document.getElementById("mobile").value;
        var address = document.getElementById("address").value;

        var jsonObject = new Object();
        jsonObject.name = name;
        jsonObject.mobile = mobile;
        jsonObject.address = address;

        var jsonStr = JSON.stringify(jsonObject);//将JSON对象转换到字符串        
        localStorage.setItem(mobile, jsonStr);
    }
    function search() {
        var mobile = document.getElementById("inputMobile").value;

        var jsonStr = localStorage.getItem(mobile);
        var jsonObject = JSON.parse(jsonStr);//将localStroage中的json字符串转换成JSON对象

        if (jsonObject == null) {
            document.getElementById("show").innerHTML = "未找到该手机对应的用户";
        } else {
            document.getElementById("show").innerHTML = mobile + "的机主是："
                    + jsonObject.name + ",地址：" + jsonObject.address;
        }
    }
    function showlist() {
        var list = document.getElementById("list");
        var html = "";
        html += "<table border='1'>";
        html += "<tr><td>手机号</td><td>机主</td><td>地址</td></tr>";
        for (var i = 0; i < localStorage.length; i++) {
            html += "<tr>";
            var key = localStorage.key(i);
            var values = localStorage.getItem(key);
            var jsonObject = JSON.parse(values);
            html += "<td>" + key + "</td>";
            html += "<td>" + jsonObject.name + "</td>";
            html += "<td>" + jsonObject.address + "</td>";
            html += "</tr>";
        }
        html += "</table>";

        list.innerHTML = html;
    }

    window.addEventListener("storage", function(e) { 
        alert(e.key + "的值被网页：" + e.url + "，由" + e.oldValue + "改变为：" + e.newValue); 
       console.log("数据改变了！");
    }, false); 
</script>
</head>
<body>
    姓名:
    <input type="text" id="name" />
    <br /> 手机:
    <input type="text" id="mobile" />
    <br /> 地址:
    <input type="text" id="address" />
    <br />
    <input type="button" onclick="save()" value="新增" />
    <hr />
    输入手机号：
    <input type="text" id="inputMobile">
    <input type="button" onclick="search()" value="查询机主" />
    <div id="show"></div>
    <br />
    <input type="button" onclick="showlist()" value="显示所有列表信息" />
    <div id="list"></div>
</body>

二、HTML 会话存储SessionStorage

1. SessionStorage的使用

SessionStorage和localStorage最大的一个区别是：SessionStorage数据的存储仅特定于某个会话中，也就是说数据只保持到浏览器关闭，当浏览器关闭后重新打开这个页面时，之前存储的就已经被清除。而localStorage是一个持久化的存储，并不局限于会话。

SessionStorage方法针对一个session进行数据存储，当用户关闭浏览器后，数据删除。如果不需要在用户新打开一个窗口依然能被访问，可以使用SessionStorage。比如：在运行某个应用的两个实例或者在运行多个窗口浏览时，不希望数据之间有关联，可以使用SessionStorage。

sessionStorage的存储数据、获取数据方法和localStorage相同，示例：

<script>
  window.onload = function() {
    sessionStorage.setItem("hobby", "唱歌");
  }
</script>