JavaScript浏览器本地储存sessionStorage,localStorage-案例:保存用户名

最新推荐文章于 2022-01-21 22:16:24 发布

Time_Ho

最新推荐文章于 2022-01-21 22:16:24 发布

阅读量168

点赞数

分类专栏： JavaScript 文章标签： javascript web

本文链接：https://blog.csdn.net/qq_19863721/article/details/103723801

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.window.sessionStorage

1、生命周期为关刘览器窗口
2、在同一个窗口（页面）下可以共享
3，以键键值对的形式存储使用

存储数据
sessionStorage.setItem(key,value)
获取数据
sessionStorage.getItem(key)
删除数据
sessionStorage.removeltem(key)
删除所有数据
sessionStorage.clear()

2.window.localStorage

1.生命周期永久生效，除非手动删除否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3.以键值对的形式存储使用

存储数据：localStorage.setltem（key，value）
获取数据：localstorage.getltem（key）
删除数据：localStorage.removeltem（key）
删除所有数据：localStorage.dear（）

sessionStorage和localStorage区别在于生命周期的不同localStorage将一直存在,除了执行删除

下面的一个简答的案例:保存用户名
简单写了一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.addEventListener("load",function () {
            var name = document.querySelector(".username");

            name.addEventListener("click",function (ev) {
            //存储
                localStorage.setItem("uname",name.value);
            })

            if(name.value!=null){
            //加载页面后判断是否有过保存数据
                name.value=localStorage.getItem("name");
            }
        });
    </script>
</head>
<body>
<input type="text" placeholder="输入用户名" class="username">
<button id="#bc">保存</button>
</body>
</html>

Time_Ho

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript浏览器本地储存sessionStorage,localStorage-案例:保存用户名

1.window.sessionStorage1、生命周期为关刘览器窗口2、在同一个窗口（页面）下可以共享3，以键键值对的形式存储使用存储数据sessionStorage.setItem(key,value)获取数据sessionStorage.getItem(key)删除数据sessionStorage.removeltem(key)删除所有数据sessionStorage...
复制链接

扫一扫