HTML5 Web存储

最新推荐文章于 2022-12-11 15:06:09 发布

Abbylolo

最新推荐文章于 2022-12-11 15:06:09 发布

阅读量342

点赞数

分类专栏： Web前端文章标签：前端 html5 javascript

本文链接：https://blog.csdn.net/Wildpiglolo/article/details/123505173

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、Cookie LocalStorage SessionStorage

1、共同点： 都是浏览器的本地存储
2、区别：
来自牛客网
（图片来源牛客网）

二、代码示例

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>HTML5-Web存储</title>
    <script src="storage.js"></script>
</head>

<body>
    <button type="button" onclick="clickCounterLocal()">localStorage</button>
    <div id="resultLocal"></div>
    <p>请点击按钮使计数器递增。</p>
    <p>关闭浏览器或标签页后再打开，不会重置</p>
    <button type="button" onclick="clickCounterSession()">sessionStorage</button>
    <div id="resultSession"></div>
    <p>请点击按钮使计数器递增。</p>
    <p>关闭浏览器或标签页后，计数器重置</p>
</body>

</html>

2、JS

function clickCounterLocal() {
    if (typeof (Storage) == "undefined") {
        document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持Web Storage!";
    } else {
        if (!localStorage.clickcountlocal) {
            localStorage.clickcountlocal = 1;
        } else {
            // 名称/值对始终存储为字符串！这里需将值从字符串转换为数字型
            // localStorage.键名 = 值；或者localStorage.setItem("键","值")；值=localStorage.getItem("键")
            localStorage.clickcountlocal = Number(localStorage.clickcountlocal) + 1;
        }
        document.getElementById("resultLocal").innerHTML = "您已经点击这个按钮" + localStorage.clickcountlocal + "次";
    }
}
// 删除对应键”xx”所存储在本地的值
localStorage.removeItem("clickcount");
function clickCounterSession() {
    if (typeof (Storage) == "undefined") {
        document.getElementById("resultSession").innerHTML = "抱歉！您的浏览器不支持Web Storage!";
    } else {
        if (!sessionStorage.clickcountsession) {
            sessionStorage.setItem("clickcountsession", "1");
        } else {
            sessionStorage.clickcountsession = Number(sessionStorage.clickcountsession) + 1;
        }
        document.getElementById("resultSession").innerHTML = "您已经点击这个按钮" + sessionStorage.clickcountsession + "次";
    }
}

3、结果

在这里插入图片描述

Abbylolo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Web存储

一、Cookie LocalStorage SessionStorage1、共同点：都是浏览器的本地存储2、区别：（图片来源牛客网）二、代码示例1、HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
复制链接

扫一扫