H5本地存储storage

来源：互联网发布：淘宝dmm充值编辑：程序博客网时间：2024/06/05 03:39

        storage:           sessionStorage                session临时回话，从页面打开到页面关闭的时间段                窗口的临时存储，页面关闭，本地存储消失            localStorage                永久存储    （可以手动删除数据）            Storage的特点                存储量限制 ( 5M )                客户端完成，不会请求服务器处理                sessionStorage数据是不共享、 localStorage共享        window.sessionStorage        window.localStorage           setItem():           设置数据，key\value类型，类型都是字符串           可以用获取属性的形式操作           getItem():           获取数据，通过key来获取到相应的value           removeItem():           删除数据，通过key来删除相应的value           clear():           删除全部存储的值

模拟登陆

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        * {margin: 0; padding: 0;}        a {text-decoration: none;}        ul,li {list-style: none;}        body {font-family: "Microsoft yahei";}        .login {display: none;}    </style></head><body>    <input type="text" id="user">    <input type="text" id="password">    <input type="button" id='login' value='登录'>    <div class="login"></div>    <input type="button" id='exit' value='退出'>    <script>    /*        storage:                sessionStorage                    session临时回话，从页面打开到页面关闭的时间段                    窗口的临时存储，页面关闭，本地存储消失                localStorage                    永久存储    （可以手动删除数据）            Storage的特点                存储量限制 ( 5M )                客户端完成，不会请求服务器处理                sessionStorage数据是不共享、 localStorage共享        window.sessionStorage        window.localStorage           setItem():           设置数据，key\value类型，类型都是字符串           可以用获取属性的形式操作           getItem():           获取数据，通过key来获取到相应的value           removeItem():           删除数据，通过key来删除相应的value           clear():           删除全部存储的值     */    var User = document.querySelector('.login');    if(window.localStorage.getItem('user')){        login.style.display = "none";        User.innerHTML = "你好,"+ window.localStorage.getItem('user');        User.style.display = 'inline-block';        user.value = window.localStorage.getItem('user');    }    // if(window.sessionStorage.getItem('user')){    //     login.style.display = "none";    //     User.innerHTML = "你好,"+ window.sessionStorage.getItem('user');    //     User.style.display = 'inline-block';    //     user.value = window.sessionStorage.getItem('user');    // }    login.onclick = function (e) {        console.log(window.localStorage);        window.localStorage.setItem('user',user.value);        // window.sessionStorage.setItem('user',user.value);        alert('登录成功');    };    exit.onclick = function () {        // window.localStorage.clear();        window.localStorage.removeItem('user');    }    </script></body></html>

多个同一页面数据共享

服务器下:        监听存储事件:            当数据有修改或删除的情况下，就会触发storage事件            在对数据进行改变的窗口对象上是不会触发的            Key : 修改或删除的key值，如果调用clear(),key为null            newValue  :  新设置的值，如果调用removeStorage(),key为null            oldValue :  调用改变前的value值            storageArea : 当前的storage对象            url :  触发该脚本变化的文档的url            注：session同窗口才可以,例子：iframe操作

<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">    <title>Document</title>    <style type="text/css">        * {margin: 0; padding: 0;}        a {text-decoration: none;}        ul,li {list-style: none;}        body {font-family: "Microsoft yahei";}    </style></head><body>    <input type="checkbox" value='芒果'/>芒果    <input type="checkbox" value='香蕉'/>香蕉    <input type="checkbox" value='西瓜'/>西瓜    <input type="checkbox" value='橘子'/>橘子    <input type="checkbox"  value='桃子'/>桃子    <script type="text/javascript">        /*        服务器下:        监听存储事件:            当数据有修改或删除的情况下，就会触发storage事件            在对数据进行改变的窗口对象上是不会触发的            Key : 修改或删除的key值，如果调用clear(),key为null            newValue  :  新设置的值，如果调用removeStorage(),key为null            oldValue :  调用改变前的value值            storageArea : 当前的storage对象            url :  触发该脚本变化的文档的url            注：session同窗口才可以,例子：iframe操作         */        var Input = document.querySelectorAll('input');        for (var i = 0; i < Input.length; i++) {            Input[i].onclick = function (e) {                if( this.checked ){                    window.localStorage.setItem('set',this.value);                    console.log(1);                }else{                    window.localStorage.setItem('no',this.value);                    console.log(2);                }            }        }        window.addEventListener('storage',function (e) {            var e = e||window.event;            console.log(1);            if(e.key == 'set'){                for (var i = 0; i < Input.length; i++) {                    if(e.newValue == Input[i].value){                        Input[i].checked = true;                    }                }            }else if(e.key == 'no'){                for (var i = 0; i < Input.length; i++) {                    if(e.newValue == Input[i].value){                        Input[i].checked = false;                    }                }            }        })    </script></body></html>

阅读全文

0 0