json数据和本地存储


文章目录

  • json数据和本地存储
  • json数据
  • 什么是JSON
  • 为什么使用JSON
  • 语法规则
  • 转换
  • 深拷贝
  • 本地存储
  • 特性
  • window.sessionStorage
  • window.localStorage
  • 记住密码案例


json数据

json是存储数据的一种格式
Javascript Object Notation（JavaScript对象表示法）

json是存储和交换文本信息的语法，类似XML，JSON比XML更小，更快更易解析

什么是JSON
  • JSON是轻量级的文本数据交换格式
  • JSON是对立与语言，使用JavaScript语法来描述数据对象
  • JSON解析器和JSON库支持许多不同的编程语言
为什么使用JSON

对应AJAX应用程序， 更快更易使用

使用json 读取json字符串 处理json字符串

语法规则

json语法是JavaScript对象表示语法的子集

  • 数据在名称/值中，
  • 数据由逗号分割
  • 大括号保存对象
  • 中括号[] 保存数组，数组可以包含多个对象
//写在双引号中   

key:value
"name":"zs"

JSON值可以是 ：数字(整数或浮点型)，字符串，布尔值，数组，对象，null

json文件的文件类型是.json

json文本的MIME类型是application/json

转换

JSON.parse(str) 把json字符串转换为json对象

JSON.stringify(jsonObj) 把对象转换为字符串

深拷贝
<script>
      var obj = {
        id: 1,
        name: 'zs',
        msg: {
          age: 12,
        },
        colors: ['pink', 'red'],
      }
      // 深拷贝的第二种
      var o = JSON.parse(JSON.stringify(obj))
      o.msg.age = 9

      console.log(obj)
</script>

本地存储

为了满足我们各种各样的需求，会经常性的在本地存储大量的数据，HTML5规范提出了相关的解决方案

特性
  • 数据存储在用户浏览器中
  • 设置、读取方便，页面刷新不丢失数据
  • 容量较大，sessionStorage大约5M，localStorage大约20M
  • **只能存储字符串，**可以将对象JSON.stringify编码后存储
window.sessionStorage
  • 生命周期为关闭浏览器窗口
  • 在同一个窗口 (页面)下数据可以共享
  • 以键值对的形式存储使用

存储数据

sessionStorage.setItem(key,value)

读取数据

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem(key)

清空数据

sessionStorage.clear()
<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>Document</title>
  </head>
  <body>
    <input type="text" />
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>

    <script>
      var ipt = document.querySelector('input')
      var set = document.querySelector('.set')
      var get = document.querySelector('.get')
      var remove = document.querySelector('.remove')
      var del = document.querySelector('.del')
      // 设置
      set.addEventListener('click', function () {
        // 当我们点击了之后，把表单里面的值存储起来
        var val = ipt.value
        sessionStorage.setItem('uname', val)
        sessionStorage.setItem('pwd', val)
      })
      // 读取
      get.addEventListener('click', function () {
        // 点击之后，把表单里面的值获取过来
        console.log(sessionStorage.getItem('uname'))
      })
      // 删除
      remove.addEventListener('click', function () {
        sessionStorage.removeItem('uname')
      })
      // 清空
      del.addEventListener('click', function () {
        // 清空所有的
        sessionStorage.clear()
      })
    </script>
  </body>
</html>
window.localStorage
  • 生命周期永久生效，除非手动删除，否则关闭页面也会存在
  • 可以多窗口（页面）共享(同一浏览器可以共享)
  • 以键值对的形式存储使用

存储数据

localStorage.setItem(key,value)

获取数据

localStorage.getItem(key)

删除数据

localStorage.removeItem(key)

清空数据

localStorage.clear()
<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>Document</title>
  </head>
  <body>
    <input type="text" />
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>

    <script>
      var ipt = document.querySelector('input')
      var set = document.querySelector('.set')
      var get = document.querySelector('.get')
      var remove = document.querySelector('.remove')
      var del = document.querySelector('.del')
      // 设置
      set.addEventListener('click', function () {
        // 当我们点击了之后，把表单里面的值存储起来
        var val = ipt.value
        localStorage.setItem('uname', val)
        localStorage.setItem('pwd', val)
      })
      // 读取
      get.addEventListener('click', function () {
        // 点击之后，把表单里面的值获取过来
        console.log(localStorage.getItem('uname'))
      })
      // 删除
      remove.addEventListener('click', function () {
        localStorage.removeItem('uname')
      })
      // 清空
      del.addEventListener('click', function () {
        // 清空所有的
        localStorage.clear()
      })
    </script>
  </body>
</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>Document</title>
  </head>
  <body>
    <input type="text" name="" id="username" />
    <input type="checkbox" id="remember" /> 记住用户名
    <script>
      var username = document.querySelector('#username')
      var remember = document.querySelector('#remember')
      // 判断本地是否存储
      if (localStorage.getItem('username')) {
        username.value = localStorage.getItem('username')
        remember.checked = true
      }
      // 复选框 的选中状态改变 进行本地存储 或者删除
      remember.addEventListener('change', function () {
        console.log(123)
        if (this.checked) {
          localStorage.setItem('username', username.value)
        } else {
          localStorage.removeItem('username')
        }
      })
    </script>
  </body>
</html>