H5ke11--3介绍本地,会话存储

白天的我最菜

已于 2023-11-18 10:18:24 修改

阅读量172

点赞数

分类专栏： H5 文章标签：前端

于 2023-11-17 20:06:01 首次发布

本文链接：https://blog.csdn.net/m0_72735063/article/details/134468780

版权

H5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

代码顺序:

1.设置input,捕获input如果有多个用属性选择符例如

input[type=file]点击事件.向我们的本地存储设置键值对

2.在点击事件外面设置本地存储表示初始化的值.点击上面的事件才能修改我们想修改的值

会话(session)浏览a数据可以写到本地硬盘,关闭页面数据就没了

本地(localStorage):以前是a打开的,有数据.放在本地.以后打开b页面还可以有相同数据

除非清空缓存

大家一定要注意要清楚缓存在这里

清除之后就是

因为我减少了设置属性

现在

现在我不设置了想变空,变不会去啦,已经存在啦

只能修改

修改后

或者全部清空

localStorage.clear()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="修改">

<script>
    let btn=document.querySelector("input")
            btn.addEventListener("click",(event)=>{
            localStorage.setItem("name","Bobxiugai")
            localStorage.setItem("age","00")
            localStorage.setItem("tall","000")
   })
    console.log(localStorage.length);
    localStorage.setItem("name","Alice");
    // localStorage.setItem("age",20);
    // localStorage.setItem("tall","165.2");

  
    console.log(localStorage.length);

    console.log(localStorage.getItem("name"));
    console.log(localStorage.getItem("age"));
    console.log(localStorage.getItem("tall"));
</script>
</body>
</html>