web Storage API — JSON

单词

store

• 读音：死躲
• 意思：(存储 store abc in variable) 、小商店

storage

• 读音：死躲为节
• 意思：(存储 store abc in variable) 、贮藏、存储空间

web storage

• 读音：温斗死躲为节
• 意思：网络存储

web Storage API

• 读音：温斗死躲为节API
• 意思：网络存储接口
  定义：**
  web Storage API是浏览器内置的存储网页数据的接口
  Storage是web Storage API的核心对象。它定义了一个属性和四个方法：
• 属性：
  • storage.length：查询数据的数量
• 方法：
  • storage.setltem()：存数据
  • storage.getltem()：取数据
  • storage.removeltem()：删除指定数据
  • storage.clear()：清库

接口的使用方法

web Storage API提供了两种实现网络存储的机制：

• window.localstorage：可以拿到Storage对象（生命周期：永生的）
• window.sessionstorage：可以拿到Storage对象（生命周期：关闭浏览器窗口就清空了）

Storage.setltem()

单词：
Set：1.动词设置 2.名字集合（字符集 charactor sets）
item：项目

<ul>
  <li>list item 列表项目</li>
</ul>

定义：
Storage.setltem()方法用于向网络存储空间添加数据(键值对)
语法：

window.localstorage.setLtem( 键名 , 键值 )
window.sessionstorage.setLtem( 键名 , 键值 )

返回值：
返回(undefined)
示例

Storage.getltem()

定义：
storage.getltem()方法用于从storage大小中读取数据
语法

window.localstorage.getltem( 键名 )
localstorage.getltem( 键名 )
window.sessionstorage.getltem( 键名 )
sessionstorage.getltem( 键名 )

返回值：
返回

JSON

两个概念

• JSON数据格式：跨语⾔的数据格式，数据格式它不属于JS范畴
• JSON对象：属于JS范畴

JSON是什么

• JSON是 JavaScript Object Notation的缩写，中⽂：js对象符号
• JSON是⼀种特殊的⽂本格式

let json = `{
"name":"zhangsan",
"age":"19",
"phone":"13333333333"
}

• JSON不是Object，是基于对象数据格式的字符串。
• JSON中属性名和属性值都必须使⽤双引号包裹。
• 禁⽌使⽤后置逗号
  定义：JSON是基于JS对象语法表明的⽂本字符串

创建JSON

1. 字⾯量法

let json = `{
"name":"zhangsan",
"age":"19",
"phone":"13333333333"
}`

2. 使⽤JSON对象创建JSON字符串

• JSON对象是JS的内置对象
• JSON对象定义了两个静态⽅法
  • JSON.stringify(obj) ：⽤于将JS中的对象转换为JSON字符串
  • JSON.parse(): ⽤于将JSON解析成J

总结

1.web Storage API是什么？

• 是浏览器内置的存储网页数据的接口

2.web Storage API核心对象是谁（Storage）

• 1.浏览器会为每一个文档源(origin)创建一个独立的存储空间（源：就是来源、空间：空间的大小是浏览器分配）
• 同源策略：a.协议 b.主机名 c.端口号必须一样
  • 1.http://www.abc.com/news/1.html（1和2同源）
  • 2.http://www.abc.com/news/2.html
  • 3.https://www.abc.com/news/2.html（3和4不同源）
  • 4.Http://www.abc.com/news/3.html

3.Storage接口定义了哪些属性和方法？（重点）

• 属性：
  • storage.length：查询数据的数量
• 方法：
  • storage.setltem()：存数据
  • storage.getltem()：取数据
  • storage.removeltem()：删除指定数据
  • storage.clear()：清库

4.浏览器内置的网络存储空间多大？（5M）

5.如何使用Storage对象？（API提供了两种操作Storage对象的机制）

• 1.window.localstorage
• 2.window.sessionstorage

6.什么是表单域

• 1.收集用户的区域
• 2.包含在form标签内存储的数据就是表单域

7.什么是表单控件

• 1.<input>
• 2.<select>
• 3.<textarea>

8.HTML中有几种按钮？

• 1.<input type=”submit” value=”提交按钮”>
• 2.<input type=”reset” value=”重置按钮”>
• 3.<input type=”button” value=”input-button按钮”>
• 4.<button>表单域内普通按钮</button>

9.那种按钮绑定了submit事件

• <input type=”submit” value=”提交按钮”>

10.如何撤销按钮的默认submit事件

• 1.将标签内按钮类型从type=”submit”修改为type=”button”

11.如何手动触发submit事件

12. JSON是什么？

• JSON是基于JS对象语法，表明的⽂本字符串
  13. JSON和JS对象的区别
• 1.引号
• 2.尾随逗号
• 3. 禁⽌前置0
• 4.JSON是字符串
  14. JSON对象提供了两种操作JSON字符串的⽅法
• 1. JSON.strigify() 转JSON
• 2. JSON.parse() 解析JSON