浏览器中的小型数据库？本地存储怎们玩（从入门到日志程序的制作）

最新推荐文章于 2023-06-28 00:06:05 发布

Try Tomato

最新推荐文章于 2023-06-28 00:06:05 发布

阅读量840

点赞数 2

分类专栏： # + 浏览器 BOM 文章标签： javascript 本地存储程序设计 localStorage sessionStorage

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124234793

版权

+ 浏览器 BOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.了解本地存储

二.window.sessionStorage

三.window.localStorage

四.练练手-存储一条数据

五.案例——网页日志程序

一.了解本地存储

本地存储，那么数据就是存储在本地的，再往下想，我们从网页中获取到的数据，存储在本地浏览器中最为合理，那浏览器给我们提供了内存吗？

确实给我们提供了一些内存，容量说小不小，说大不大

有俩种存储方法：

sessionStorage≈5M

localStorage≈20M

优点：设置、读取方便，页面刷新不丢失数据（除非自己手动删除）

缺点：本地存储只能存储字符串的数据格式（我们可以将对象、数组使用JSON.stringify()编码之后再存储）

二.window.sessionStorage

生命周期为关闭浏览器窗口

在同一个窗口页面下数据可以共享

以键值对的形式存储使用

1.存储数据

sessionStorage.setItem(key,value)

2.获取数据

sessionStorage.getItem(key)

3.删除数据

sessionStorage.removeItem(key)

4.删除所有数据

sessionStorage.clear()

三.window.localStorage

生命周期永久生效

多个页面多个窗口共享数据（因为存储在浏览器中，所以你在谷歌存储的数据在火狐中是没有该数据的）

以键值对的形式存储

操作方式与sessionStorage相同，这里不做过多的阐述

四.练练手-存储一条数据

<body>
    <input type="text">
    <button>点击存储数据</button>
</body>
<script>
    const ipt = document.querySelector('input')
    const btn = document.querySelector('button')
    btn.addEventListener('click',()=> {
        if(ipt.value.trim != ''){
            localStorage.setItem('数据',JSON.stringify(ipt.value))
        }else{
            alert('请输入文本')
        }
    })
</script>

五.案例——网页日志程序

jQuery-给自己做一个拥有增删改查功能的任务管理器【重点】_Developer小蜗的博客-CSDN博客我们今天来做一款可以存储信息的任务管理器，可以说是我们前端入门的第一个小项目了，人机数据交互，LOGO是自己随便设计的，大家凑合看，主要是功能的实现，功能的实现思路，然后我们直接上所有源代码，大家可以随意使用，转载请标明出处...https://blog.csdn.net/weixin_63836026/article/details/123462063

Try Tomato

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
浏览器中的小型数据库？本地存储怎们玩（从入门到日志程序的制作）

目录一.了解本地存储二.window.sessionStorage1.存储数据2.获取数据3.删除数据4.删除所有数据三.window.localStorage四.练练手-存储一条数据五.案例——网页日志程序一.了解本地存储本地存储，那么数据就是存储在本地的，再往下想，我们从网页中获取到的数据，存储在本地浏览器中最为合理，那浏览器给我们提供了内存吗？确实给我们提供了一些内存，容量说小不小，说大不大有俩种存储方法：sessionStorage≈5.
复制链接

扫一扫