Javascript

js本地存储应用及详解

本文主要是介绍js本地存储应用及详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、总结

 2种本地存储方式 生命周期 数据共享 存储形式 方法
window.sessionStorage 关闭浏览器

同一个窗口(页面)

 键值对

存储数据sessionStorage.setItem(key,value)

获取数据sessionStorage.setItem(key)

删除数据sessionStorage.removeItem(key)

删除所用数据sessionStorage.clear()
window.localStorage  生命周期永久生效，除非手动删除否则关闭页面也会存在 同一浏览器下的多个窗口（页面）可以共享 键值对

存储数据localStorage.setItem(key,value)

获取数据localStorage.getItem(key)

删除数据localStorage.removeItem(key)

删除所有数据localStorage.clear()she

二、举例：记住用户名

 

 html代码：

<body>
    <input type="text" id="username" placeholder="输入用户名">
    <input type="checkbox" id="remember">记住用户名
</body>

js代码

<script>
    //获取元素
    var usernamInput = document.querySelector('#username');
    var remember = document.querySelector('#remember');
    //1、打开网页，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
    if (window.localStorage.getItem('username')) {
        usernamInput.value = window.localStorage.getItem('username');
        remember.checked = true;
    };
    //2、给复选框注册change事件，如果复选框被勾选，就把数据存起来，用到本地村吃醋；相反如果去掉勾选，则移除该用户名
    remember.addEventListener("change", function() {
        if (remember.checked) {
            window.localStorage.setItem('username', usernamInput.value);
        } else {
            window.localStorage.removeItem('username');
        }
    })
</script>

效果

 

 

 

这篇关于js本地存储应用及详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航