文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

原生JavaScript实现本地存储(localStorage)和会话存储(sessionStorage)

2023-08-31 06:18

关注

目录

一、简单介绍

二、localStorage本地存储

三、sessionStorage会话存储


一、简单介绍

本地存储和会话存储的目的,是将所输入的文件存入到浏览器中,在需要的时候,直接调用,但是本地存储和会话存储有着一定的区别,本地存储,在不主动删除的情况下,会一直保留在浏览器中,会话存储是,当前保存的内容,页面刷新还会保留在浏览器中,但是关闭页面在打开时,会发现没有数据了。这是他们两的用处和区别。

二、localStorage本地存储

如下代码

我们先给button一个监听事件,让我们有存入的动作

这里是想在提交后也能在页面上显示,所有定义了一个li来吧input的value值赋值到ul里面

这里使用了insertBefore在添加时,会在最上方

这里arr是自己定义的数组

存储和获取都是通过函数封装

savaData(arr)就是将input的值存储到了浏览器

window.localStorage.setItem('input', JSON.stringify(title)) 保存的代码title是形参,input自己取得

获取let data = window.localStorage.getItem('input') 上面取的input

这里有个if判断是判断这里data是否有内容,有就return JSON.parse(data) 没有就return[]主要是得到所有内容的数组

代码段也有注释解释

        

    三、sessionStorage会话存储

    与本地存储的使用没有区别,只要在跟换单词即可

    window.sessionStorage.setItem('input', JSON.stringify(title))

    let data = window.sessionStorage.getItem('input')

                

      来源地址:https://blog.csdn.net/yzq0820/article/details/126111913

      阅读原文内容投诉

      免责声明:

      ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

      ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

      软考中级精品资料免费领

      • 历年真题答案解析
      • 备考技巧名师总结
      • 高频考点精准押题
      • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

        难度     813人已做
        查看
      • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

        难度     354人已做
        查看
      • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

        难度     318人已做
        查看
      • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

        难度     435人已做
        查看
      • 2024年上半年系统架构设计师考试综合知识真题

        难度     224人已做
        查看

      相关文章

      发现更多好内容

      猜你喜欢

      AI推送时光机
      位置:首页-资讯-后端开发
      咦!没有更多了?去看看其它编程学习网 内容吧
      首页课程
      资料下载
      问答资讯