JavaScript实现本地存储

Cookie
数据存储在计算机中，通过浏览器添加和删除

Cookie 的特点
存储限制， 一个域名100个cookie，每组值大小4kb
客户端，服务器端，都会请求服务器信息（头信息）
页面间的cookie是共享的

Storage
sessionStorage
-session临时回话，从页面打开到页面关闭的时间段
-窗口的临时存储，页面关闭，本地存储消失
localStorage
-永久存储（可以手动删除数据）

Storage的特点
存储量限制（5M）
客户端完成，不会请求服务器处理
sessionStorage数据是不共享的、localStorage共享

Code

<script>
        window.onload = function () {
            var oInput = document.getElementsByTagName("input");

            //设置
            oInput[0].onclick = function () {
                window.localStorage.setItem('name', oInput[3].value);
            };
            //获取
            oInput[1].onclick = function () {
                alert(window.localStorage.getItem('name'));
            };
            //删除
            oInput[2].onclick = function () {
                window.localStorage.removeItem('name');
            };

            //数据更改时会被触发|在当前页面的这个事件修改的话，不会被修改。
            window.addEventListener('storage', function (ev) {
                var ev = ev || window.event;
                console.log(ev.key);
                console.log(ev.url);
                console.log(ev.newValue);
                console.log(ev.oldValue);
                console.log(ev.storageArea);


                alert(123);
            }, false);
        }
    </script>

案例二：

<script>
        //描述：运行本页面，再打开一个本页面、在其中一个页面选中值，另一个页面将会同步选中
        window.onload = function () {
            var oInput = document.getElementsByTagName("input");

            oInput[0].onclick = function () {
                //sessionStorage:临时性存储
                //localStorage:永久性存储

                //window.sessionStorage.setItem('name', oInput[3].value);
                window.localStorage.setItem('name', oInput[3].value);
            }

            oInput[1].onclick = function () {
                //alert(window.sessionStorage.getItem('name'));
                alert(window.localStorage.getItem('name'));
            }



        }
    </script>