json数据和本地存储
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>