请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

JS本地储存:localStorage和sessionStorage

 
localStorage和sessionStorage是Web提供的两种本地存储方式。
相比较cookie而言,localStorage和sessionStorage的存储大小很大,localStorage能够长期保存,sessionStorage在会话期间保存。
localStorage和sessionStorage都是window对象提供的全局属性,用途都是在浏览器中存储key/value对的数据。
从使用的角度来看,两者的唯一区别在于时效性。
sessionStorage在关闭窗口或标签页之后将会删除这些数据。
而localStorage则没有这样的特性,今天、下周、明年、一百年,甚至理论上的成千上万年后都能用,除非你手动去删除。
如果你想在浏览器窗口关闭后还保留数据,请使用localStorage。
如果你是想用于临时保存同一窗口(或标签页)的数据,请使用sessionStorage。

使用sessionStorage案例:
<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        console.log(localStorage.getItem('username'));

        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 当我们点击了之后,就可以把表单里面的值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 当我们点击了之后,就可以把表单里面的值获取过来
            console.log(sessionStorage.getItem('uname'));
        });
        remove.addEventListener('click', function() {
            //
            sessionStorage.removeItem('uname');
        });
        del.addEventListener('click', function() {
            // 当我们点击了之后,清除所有的
            sessionStorage.clear();
        });
    </script>
</body>

使用localStorage案例:
<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));
        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');
        })
        del.addEventListener('click', function() {
            localStorage.clear();
        })
    </script>
</body>
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。