SessionStorage和LocalStorage

SessionStorage

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage

如下的内容我只是将官方文档当中的内容自行的进行实战了一遍，测试只需要自行去按照 SessionStorage 的生命周期的特点进行测试即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SessionStorage</title>
</head>
<body>
<button class="btn1">保存</button>
<button class="btn2">删除</button>
<button class="btn3">修改</button>
<button class="btn4">查找</button>
<button class="btn5">清空</button>

<script src="js/jquery-1.12.4.js"></script>
<script>
    $('.btn1').click(function () {
        sessionStorage.setItem("name", "BNTang");
    });
    $('.btn2').click(function () {
        sessionStorage.removeItem("name");
    });
    $('.btn3').click(function () {
        sessionStorage.setItem("name", "it6666");
    });
    $('.btn4').click(function () {
        let value = sessionStorage.getItem("name");
        alert(value);
    });
    $('.btn5').click(function () {
        sessionStorage.clear();
    });
</script>
</body>
</html>

LocalStorage

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

测试方式如 SessionStorage 同理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LocalStorage</title>
</head>
<body>
<button class="btn1">保存</button>
<button class="btn2">删除</button>
<button class="btn3">修改</button>
<button class="btn4">查找</button>
<button class="btn5">清空</button>

<script src="js/jquery-1.12.4.js"></script>
<script>
    $('.btn1').click(function () {
        localStorage.setItem("name", "BNTang");
    });
    $('.btn2').click(function () {
        localStorage.removeItem("name");
    });
    $('.btn3').click(function () {
        localStorage.setItem("name", "it6666");
    });
    $('.btn4').click(function () {
        let value = localStorage.getItem("name");
        alert(value);
    });
    $('.btn5').click(function () {
        localStorage.clear();
    });
</script>
</body>
</html>

End

posted @ 2021-11-11 00:26  BNTang  阅读(49)  评论(0)    收藏  举报