本地存储-window.sessionStorage-生命周期为关闭浏览器窗口/window.localStorage-生命周期永久生效-change

本地存储特性：
1.数据存储在用户浏览器中
2.设置、读取方便、甚至页面刷新不丢失数据
3.容量大较大、sessionStorage约5M、localStorage约20M
4.只能存储字符串，可以将对象JSON.stringify()编码后存储

1.window.sesionStorage
1.1.生命周期为关闭浏览器窗口
1.2在同一个窗口下数据可以共享
1.3以键值对的形式存储使用
案例：
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空数据</button>
<script>
    var inputs = 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 = inputs.value;
        sessionStorage.setItem('uname',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>
</html>

运行结果：
在这里插入图片描述
2.window.localStorage
2.1生命周期永久生效，除非手动删除否则关闭页面也会存在
2.2可以多窗口页面共享（同一浏览器也可以共享）
2.3以键值对的形式存储使用
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空数据</button>
<script>
    var inputs = 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 = inputs.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>
</html>

运行结果：
在这里插入图片描述
2.1记住用户名：
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username"><input type="checkbox" id="remember">记住用户名
<script>
    var username = document.querySelector('#username')
    var remember = document.querySelector('#remember')
    if (localStorage.getItem('uname')){
        username.value = localStorage.getItem('uname')
        remember.checked =true
    }
    // 当选框发生改变时
    remember.addEventListener('change',function () {
        if (this.checked){
            localStorage.setItem('uname',username.value)
            // username.value = localStorage.getItem('uname')
        } else {
            localStorage.removeItem('uname')
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

南下有你

发布了23 篇原创文章 · 获赞 0 · 访问量 552

私信关注

本地存储-window.sessionStorage-生命周期为关闭浏览器窗口/window.localStorage-生命周期永久生效-change

猜你喜欢