（本地、会话）存储_前端清理本地会话-CSDN博客

本文链接：https://blog.csdn.net/weixin_52993364/article/details/124968345

一、window.localStorage(本地存储)存储的数据没有过期时间。

语法：myStorage = localStorage;返回一个Storage对象

添加：localStorage.setItem('key','value');

获取：localStorage.getItem('key');

移除：localStorage.removeItem('key');

清空：localStorage.clear();不接收参数，清空存储对象里的所有数据

二、window.sessionStorage(会话存储)存储的数据会在浏览器会话结束时被清除（即浏览器关闭时）

语法：myStorage = sessionStorage;返回一个storage对象

添加：sessionStorage.setItem('key','value');

获取：sessionStorage.getItem('key');

移除：sessionStorage.removeItem('key');

清空：sessionStorage.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>111111111</title>
</head>

<body>
    <input type="text">
    <button>22222222</button>
</body>
<script>
    var ipt = document.querySelector("input")
    var btn = document.querySelector("button");

    btn.onclick = function () {
        // location.href = '2.html?name=' + ipt.value;
        localStorage.name = ipt.value;
        location.href = '3.html';
    }
</script>

</html>

在3.html中获得1.html的数据：

<!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>333333333</title>
</head>
<body>
    <p></p>
</body>
<script>
    var p = document.querySelector('p');
    p.innerHTML = localStorage.name;
</script>
</html>

storage-CSDN直播本地存储https://live.csdn.net/v/211311