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 = 9console.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.valuesessionStorage.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.valuelocalStorage.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>

json数据和本地存储相关推荐

（31）2021-01-20（JSON字符串和本地存储）
JSON字符串和本地存储一.json字符串二.示例 1.对象或数组转JSON字符串使用方法:JSON.stringify(数组或对象) 2.JSON字符串转对象或数组使用方法:JSON.par ...
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
即构服务端录制SDK上线，音视频数据实现本地存储录制回放
日常生活中,我们可能会有这些需求: 看到有趣的直播内容,会想能不能保存下来再次回看: 报名了线上的课程,家长想了解孩子的学习状态,希望能看到在线学习的过程: 金融行业,管理人员需要定期调取视频客服的服 ...
unity3D数据的本地存储（xml的方式）
数据本地的存储第一种方式:unity自带的存储方式 PlayerPrefs.SetInt("num",num); //setFloat setString PlayerPrefs ...
浏览器上实现数据的本地存储・小结
在客户端存储数据时,我们一般都用cookie(不敏感数据),但是在客户端越来越富的今天,cookie可存储的量(每个域最大4k)实在是小. 在HTML5中有localStorage可使用,但是这就抛弃 ...
大量json数据解析OOM 存储数据库 assets下的json压缩文件解压
项目背景:assets包下有个json压缩文件,要求对该文件进行解压,再对解压后的json文件进行解析,并最终将数据存入数据库中.json文件包含30万条数据,文件大小是180M,由于数据量大,采用了 ...
我用JS做了一个记账本 [数据可本地存储] 附万字详解
目录一.本地操作
前端学习（3037）：vue+element今日头条管理-把数据放到本地存储
Python爬虫项目：爬取JSON数据存储Excel表格与存储图片
随着网络的迅速发展,万维网成为大量信息的载体,如何有效地提取并利用这些信息成为一个巨大的挑战.搜索引擎(Search Engine),例如传统的通用搜索引擎AltaVista,Yahoo!和Googl ...

json数据和本地存储

json数据和本地存储

文章目录

json数据

什么是JSON

为什么使用JSON

语法规则

转换

深拷贝

本地存储

特性

window.sessionStorage

window.localStorage

记住密码案例

json数据和本地存储相关推荐

最新文章

热门文章