Lz blog

Appearance

本地存储 ​

js
//创建Cookie
            function setCookie(cname, cvalue, exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toUTCString();
                document.cookie = cname + "=" + cvalue + "; " + expires;
            }
            //获取Cookie
            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    // trim(移除前后空格)
                    var c = ca[i].trim();
                    // indexOf(str) str第一次出现的下表
                    if (c.indexOf(name) == 0) {
                        // substring(start, end)
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            }

sessionStorage ​

1、生命周期为关闭浏览器窗口

2、在同一个窗口下数据可以共享

3、以键值对的形式存储使用

js
<body>
    <input type="text">
    <button class="save">存储</button>
    <button class="get">获取</button>
    <button class="remove">删除</button>
    <button class="clear">清除所有</button>
</body>
<script>
    var text = document.getElementsByTagName('input')[0];
    var bsave = document.getElementsByClassName('save')[0];
    var bget = document.getElementsByClassName('get')[0];
    var bremove = document.getElementsByClassName('remove')[0];
    var bclear = document.getElementsByClassName('clear')[0];
    bsave.onclick = function() {
        var t = text.value;
        sessionStorage.setItem('uname', t);
        sessionStorage.setItem('pw', t);
    }
    bget.onclick = function() {
        var getname = sessionStorage.getItem('uname');
        console.log(getname);
    }
    bremove.onclick = function() {
        sessionStorage.removeItem('uname');
    }
    bclear.onclick = function() {
        sessionStorage.clear();
    }

localStorage ​

1、生命周期永久存在，除非手动删除，否则关闭页面也存在

2、可以多窗口共享，一个浏览器（不同页面）都可以共享

3、以键值对的形式存储使用

js
<body>
    <input type="text">
    <button class="save">存储</button>
    <button class="get">获取</button>
    <button class="remove">删除</button>
    <button class="clear">清除所有</button>
</body>
<script>
    var text = document.getElementsByTagName('input')[0];
    var bsave = document.getElementsByClassName('save')[0];
    var bget = document.getElementsByClassName('get')[0];
    var bremove = document.getElementsByClassName('remove')[0];
    var bclear = document.getElementsByClassName('clear')[0];
    bsave.onclick = function() {
        var t = text.value;
        localStorage.setItem('uname', t);
        localStorage.setItem('pw', t);
    }
    bget.onclick = function() {
        var getname = localStorage.getItem('uname');
        console.log(getname);
    }
    bremove.onclick = function() {
        localStorage.removeItem('uname');
    }
    bclear.onclick = function() {
        localStorage.clear();
    }
</script>