Web本地存储

1.Web 本地存储简介

1.SessionStorage和LocalStorage都是浏览器本地存储，统称为Web Storage，存储内容大小一般支持5-10MB

2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

3.sessionStorage（临时存储）: 为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

4.localStorage（长期存储）: 与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

2.localStorage / sessionStorage的使用（两者基本一致）

1、存储

window.xxxStorage.setItem(key, value)

xxxStorage.key = value

2、获取

window.xxxStorage.getItem(key)

xxxStorage.key

3、删除某个数据

window.xxxStorage.removeItem(key)

4、删除全部数据

window.xxxStorage.clear()

5、长度属性

window.xxxStorage.length

6.返回存储对象中第 n 个键的名称（即按索引取键）

window.xxxStorage.key(n)

案例：留言板

• demo.css

* {
     margin: 0 auto;
     padding: 0;
     font-family: "Microsoft YaHei", "sans-serif";
}

.container {
     margin-top: 20px;
}

.btn {
     padding: 5px 10px;
}

.messageList {
     position: relative;
}

.messageList .delete_item {
     position: absolute;
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
     padding: 5px 10px;
}

• demo.js

$(function () {
    //提交
    $(".btn-box .submit").click(function () {
        var _name = $(".name").val(),
            _msg = $(".message").val();
        if (!_name || !_msg) {
            alert('请输入信息')
        } else {
            localStorage.setItem(_name, _msg);
            $(".name, .message").val(''); //清空数据
            listShow();
        }
    });

    //查看
    $(".btn-box  .viewMes").click(function () {
        listShow();
    })

    //删除全部留言
    $(".btn-box  .deleteAll").click(function () {
        $(".messageList").html("");
        localStorage.clear();
    })

    $(".messageList").on("click", ".delete_item", function () {
        $(this).parent().remove();
        localStorage.removeItem($(this).parent().children(".key").text());
    });

    //列表展示
    function listShow() {
        var str = '';
        for (var i = 0; i < localStorage.length; i++) {
            var _key = localStorage.key(i), //获取key
                _value = localStorage.getItem(_key); //通过key获取value
            str += '<li class="list-group-item"><span class="key">' + _key +
                '</span>说：<span class="value">' + _value + '</span><button class="delete_item">删除</button></li>';
        };
        $(".messageList").html(str);
    }

})

• index.html

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>

<div class="container">
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-1 control-label">昵称：</label>
            <div class="col-sm-11">
                <input type="email" class="form-control name" id="inputEmail3" placeholder="请输入昵称">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">留言：</label>
            <div class="col-sm-11">
                <textarea class="form-control message" rows="5" placeholder="请输入内容"></textarea>
            </div>
        </div>
        <div class="form-group  btn-box">
            <div class="col-sm-offset-1 col-sm-11">
                <button type="submit" class="btn btn-success submit">提交留言</button>
                <button class="btn btn-primary viewMes">查看留言</button>
                <button class="btn btn-danger deleteAll">删除留言</button>
            </div>
        </div>
    </div>

    <div class="panel panel-primary">
        <div class="panel-heading">留言列表</div>
        <div class="panel-body">
            <ul class="list-group messageList">
                <!-- <li class="list-group-item">张三
                <span>说：</span>大家好！
                </li> -->
            </ul>
        </div>
    </div>
</div>

3.如何实现浏览器跨页面通信 - localStorage + storage事件（重点！）

1.storage事件：

​ 1）Storage对象发生变化时触发（即创建/更新/删除数据项时，Storage.clear() 只会触发一次）

​ 2）在同一个页面内发生的改变不会起作用

​ 3）在相同域名下的其他页面发生的改变才会起作用。(修改的页面不会触发事件，与它共享的页面会触发事件)

​ 4）event事件对象的属性

​ key：修改或删除的key值，如果调用clear()，为null

​ newValue：新设置的值，如果调用clear()，为null

​ oldValue：调用改变前的value值,如果调用clear()，为null

​ url：触发该脚本变化的文档的url

​ storageArea：当前的storage对象

2.使用方法：

window.addEventListener('storage',function (event) {
    //此处写具体业务逻辑
})

案例：多页面输入框数据同步

• index1.html

<input type="text" id="input">
<script type="text/javascript">
    let input = document.getElementById('input')
    input.onblur = function () {
        localStorage.setItem('demo', input.value)
    }
</script>

• index2.html

<input type="text" id="input">
<script type="text/javascript">
    let input = document.getElementById('input')
    window.addEventListener('storage', function (event) {
      console.log(event)
      input.value = event.newValue
    })
</script>