Window.localStorage 本地存储

Posted 乱舞春秋__

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Window.localStorage 本地存储相关的知识,希望对你有一定的参考价值。

localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。

特点:

1.生命周期直至手动删除

2.同一个浏览器内数据可以共享

3.3.以键值对的方式存储数据

使用方法:

1.存取数据

语法格式:

localStorage.setItem("key", "value");

2.读取数据

语法格式:

localStorage.getItem("key");

3.删除数据

语法格式:

localStorage.removeItem("key");

4.清空数据

语法格式:

localStorage.clear( );

示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    用户名:<input type="text" id="uname">
    年龄:<input type="text" id="uage">
    <button class="save">存储</button>
    <button class="remove">删除用户名</button>
    <button class="get">读取用户名</button>
    <button class="clear">清空</button>
    <script>
        var uname = document.querySelector('#uname');
        var uage = document.querySelector('#uage');
        var save = document.querySelector('.save');
        var remove = document.querySelector('.remove');
        var get = document.querySelector('.get');
        var clear = document.querySelector('.clear');
        save.addEventListener('click', function () {
            var infoname = uname.value;
            var infoage = uage.value;
            localStorage.setItem('username', infoname);
            localStorage.setItem('userage', infoage);
        });
        remove.addEventListener('click', function () {
            localStorage.removeItem('username');
        });
        get.addEventListener('click', function () {
            console.log(localStorage.getItem('username'));
        });
        clear.addEventListener('click', function () {
            localStorage.clear();
        });
    </script>

</html>

输入以下内容:

(1)点击存储按钮

两条数据被存储至本地存储。

(2)点击删除用户名按钮

username数据被删除。

(3)点击获取用户名按钮

控制台输出了username。

(4)点击清空按钮

数据被清空。

值得一提的是,关闭页面后,再次打开时数据仍然存在。

 

以上是关于Window.localStorage 本地存储的主要内容,如果未能解决你的问题,请参考以下文章

【知识】浏览器的LocalStorage本地存储入门

本地存储 使用localStorage 存储数据

本地存储

localStorage本地存储的用法

window.sessionStorage、window.localStorage与cookie总结

H5_0047:localStorage本地浏览器数据存储