JavaScript之本地存储

编程语言 2023-07-01 11:24:06 阅读次数: 0

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

前言

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
以前我们可能会把大量数据存储到数据库，而且还要从服务器里面频繁获取再使用，这很麻烦，更何况有些功能的数据没必要存到数据库内。

本地存储特性

  1. 数据存储在用户浏览器中。
  2. 设置、读取方便、甚至页面刷新不丢失数据。
  3. 容量较大，sessionStorage约5M、localStorage约20M。
    不要小看5M喔，大约能存储几百万个字呢。
  4. 只能存储字符串，可以将对象JSON.stringfy()编码后存储。

一、目标

  1. 能够写出sessionStorage数据的存储以及获取
  2. 能够写出localStorage数据的存储以及获取
  3. 能够说出它们两者的区别

二、主要学习内容

1. window.sessionStorage

1.1 sessionStorage的特性

  1. 生命周期为关闭浏览器窗口。
  2. 在同一个窗口（页面）下数据可以共享。
  3. 以键值对的形式存储使用。想存对象形式的数据可以用JSON.stringify(value)

1.2 sessionStorage的示例

1. 存储数据

sessionStorage.setItem(key,value)

1.1 代码示例：

<body>
  <input type="text">
  <button class="set">存储数据</button>
  
  <script>
  // 获取输入框和按钮元素
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
    })
  </script>
</body>

1.2 示例图片：

存储数据示例图：

在这里插入图片描述试验的话打开控制台找到应用或Application → sessionStorage或会话存储空间
我的控制台是中文翻译了的。

还可以测试它的特性 - 生命周期为关闭浏览器窗口。 只要你不关闭页面窗口，它会一直存在，刷新页面也没关系。

刷新页面示例图：

在这里插入图片描述

2. 获取数据

sessionStorage.getItem(key)

2.1 代码示例：

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
    })
    // 获取 获取数据按钮的元素
    var get = document.querySelector('.get')
    // 注册绑定事件
    get.addEventListener('click', function() {
      
      
    // 点击后打印输出获得的本地数据
      console.log(sessionStorage.getItem('user'))
    })
  </script>

2.2 示例图片：

获取本地存储数据图：

在这里插入图片描述

3. 删除数据

sessionStorage.removeItem(key)

3.1 代码示例：

<body>
  <input type="text">
  <button class="remove">删除数据</button>
  <script>
    var inp = document.querySelector('input')
    // 给按钮注册绑定点击事件
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
    // 删除本地数据
      sessionStorage.removeItem('user')
    })
  </script>
</body>

3.2 示例图片：

在这里插入图片描述

4. 清空所有数据

sessionStorage.clear()

4.1 代码示例：

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="clear">清空所有数据</button>

  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
      sessionStorage.setItem('pwd',val)
    })
    // 清空所有数据
    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
    // 清空所有数据
      sessionStorage.clear()
    })
  </script>
</body>

4.2 示例图片：

在这里插入图片描述

1.3 sessionStorage 完整实例代码：

<!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>08-本地存储sesstionStorage</title>
</head>
<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <button class="remove">删除数据</button>
  <button class="clear">清空所有数据</button>

  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
      sessionStorage.setItem('pwd',val)
    })
    // 获取数据
    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
      console.log(sessionStorage.getItem('user'))
    })
    // 删除数据
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
      sessionStorage.removeItem('user')
    })
    // 清空所有数据
    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
      sessionStorage.clear()
    })
  </script>
</body>
</html>

2. window.localStorage

2.1 localStorage的特性

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

2.2 sessionStorage的示例

1. 存储数据

localStorage.setItem(key,value)

1.1 代码示例：

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
    })
  </script>
</body>

1.2 示例图片：

存储数据示例图：
在这里插入图片描述
在此我们可以再试验localStorage的特性 - 生命周期永久生效，除非手动删除，否则关闭页面也会存在。

关闭后重新打开此页面示例图：

在这里插入图片描述此图有点久，看完此图后确实localStorage的生命周期一直存在，除非我们手动删除。

2. 获取数据

localStorage.getItem(key)

2.1 代码示例：

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
    })
    // 获取数据
    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
    // 获取数据并在控制台中打印输出
      console.log(localStorage.getItem('user'))
    })
   </script>
<body>

2.2 示例图片：

在这里插入图片描述
这里输出一个是因为我只写了一个输入user的console.log语句

3. 删除数据

localStorage.removeItem(key)

3.1 代码示例：

<body>
  <input type="text">
  <button class="remove">删除数据</button>
  <script> 
    var inp = document.querySelector('input')
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
    // 删除数据
      localStorage.removeItem('user')
    })
  </script>
</body>

3.2 示例图片：

在这里插入图片描述

4. 清理所有数据

localStorage.clear()

4.1 代码示例：

<body>
  <input type="text">
  <button class="clear">清空所有数据</button>

  <script> 
    var inp = document.querySelector('input')

    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
    // 清空所有数据
      localStorage.clear()
    })
  </script>
</body>

4.2 示例图片：

在这里插入图片描述
试验可以 多窗口（页面）共享 （同一浏览器可以共享）。

在localStorage的页面中存储的数据：

在这里插入图片描述

我们换其他页面，并在其他页面中写入一段localStorage.getItem()输入语句，看看是否能获取到名为test的值
示例图：

在这里插入图片描述
在另一个html页面内写入：

console.log(localStorage.getItem(‘test’));
用来试验 多窗口（页面）共享（同一浏览器可以共享）。

2.3 localStorage 完整示例代码：

<!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>09-本地存储之localStorage</title>
</head>
<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <button class="remove">删除数据</button>
  <button class="clear">清空所有数据</button>

  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
      localStorage.setItem('test',val)
    })

    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
      console.log(localStorage.getItem('user'))
    })

    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
      localStorage.removeItem('user')
    })

    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
      localStorage.clear()
    })
    
  </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_46278178/article/details/127035976
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022