关于Storage与JSON的小框

北穆川
148 阅读4分钟

store

  • 读音：丝跺
  • 存储
store 'abc' in variable
  • 小商店

storage

  • 读音：丝跺瑞汁
  • 意思：存储

web storage

意思：网络存储

web Storage API

意思：网络存储接口

定义

web Storage API是浏览器内置的存储网页数据的接口

Storage是web Storage API的核心对象，它定义了一个属性和四个方法:

  • Storage.length 查询数据的总长度
  • Storage.setltem() 存储数据
  • Storage.getltem() 读取数据
  • Storage.removeltem() 删除指定数据
  • Storage.clear() 清除库
  • Storage.key()根据索引查找名字
  • SyntaX 描述了该属性所允许的语法结构。

接口的使用方法

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

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

总结

  1. web Storage API 是什么？

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

  2. web Storage 的核心对象是谁？ storage

    1. 浏览器会为每一个文档源(origin)创建一个存储空间
    2. 同源策略:a协议b主机名c端口号必须相同
1. http://www.abc.com/news/1.html

2. http://www.abc.com/news/2.html

3. https://www.abc.com:80/news/2.html

4. https://www.abc.com:8081/news/2.html

5. Https://news.abc.com/news/3.html

6. https://qq.com 主域名

7. https://news.qq.com

8. Https://y.qq.com

  1. Storage接口定义了哪些属性和方法？(重点)

    1. Storage.length 查询数据的总长度
    2. Storage.setltem() 存储数据
    3. Storage.getltem() 读取数据
    4. Storage.removeltem() 删除指定数据
    5. Storage.clear() 清除库
    6. Storage.key()根据索引查找名字

  2. 如何使用Storage对象？(API提供了两种操作Storage对象的机制)

    1. window.localstorage (长期保存)
    2. window.sessionstorage (关闭对应浏览器标签或窗口，会清除对应的 )

  3. 浏览器内置的浏览器存储空间多大？

    1. (5m)

  4. 什么是表单域

    1. 收集用户数据的区域

  5. 什么是表单控件

    1. input
    2. select
    3. textarea

  6. HTML中有几种按钮

    1. reset
    2. 表单域内button
    3. submit
    4. <input type="button">
    5. 表单域外的button

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

    1. <input type='submit'>
    2. 表单域里面的button

  8. 如何取消按钮的默认submit事件

    1. button.preventDefault()

  9. 如何手动触发submit事件

    1. 表单域里面使用button

  10. json是什么？

    1. JSON是基于JS对象语法表示的文本字符串
    2. JSON是一种数据格式

  11. JSON和JS对象的区别

    1. JSON必须是双引号不能是单引号
    2. JSON禁止尾随逗号,js可以尾随逗号
    3. JSON禁止0前置
    4. JSON是字符串要带引号

  12. JSON对象提供了两种操作JSON字符串的方法

    1. JSON.strigfy()转JSON
    2. JSON.parse()解析JSON

SyntaX

定义

注意处于实验中的工能 StntaX描述该属性允许的语法结构

storage.setltem()

单词

Set:1.动词设置，2.名字设置(字符集 charactor sets)

item：项目

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

定义

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

语法

window.localstorage.setItem('键名'，'键值')
window.sessionstorage('键名','键值')

返回值

undefind

storage.getltem()

定义

storage.getltem()方法用于从storage对象中读取数据

语法

window.loclstorage.getltem('键名')

返回值

  • 读取到了返回读取到的值
  • 没有读取到返回null

Storage.removeItem()

定义

storage.removeltem()Storage对象删除的数据

语法

Storage.removeltem(Keyname)

参数

一个你想移除的键名

返回值

无

Storage.clear()

定义

Strage.clear()清除所有的库

语法

storage.clear();

参数

无

返回值

无

storage.key()

定义

Storage.key()通过索引获取键名

语法

var name = storage.key()

参数

一个整数，表示获取的索引

返回值

一个包含键名的名字

JSON

两个概念

  • json数据格式：跨语言的数据格式，数据格式它不属于JS范畴
  • json对象:属于JS范畴

JSON是什么？

  • JSON是javascript object Notation的缩写,中文：js缩写
  • JSON是一种特殊的文本格式
let json ={
    'name':'张三',
    'age':'19',
    'phone':'1333333'
}
  • JSON不是object，是基于对象格式的字符串
  • JSON中属性名和属性值都必须使用双引号包裹
  • 禁止使用后置逗号

定义

JSON是基于JS对象语法表示的文本字符串

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同：JavaScript 不是 JSON，JSON 也不是 JavaScript。

创建JSON

1.字面量发

let json ={
    'name':'张三',
    'age':'19',
    'phone':'1333333'
}

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

  • JSON对象是JS的内置对象

  • JSON对象定义了两个静态方法

    • JSON.stringify()：用于将JS中的对象转换成JSON字符串
    • JSON.parse():用于将JSON解析成JS对象

JSON.stringify()

定义

JSON.stringify()将js对象转成JSON字符串

语法

JSON.stringify(value[, replacer [, space]])

参数

JOSN的值

返回值

一个表示给定值的JOSN的字符串

JSON.parse()

定义

JSON.parse()用于用字符串描述js对象

语法

JSON.parse(text[, reviver])

参数

要被解析成 JavaScript 值的字符串

返回值

object类型，对应给定JSON文本的对象/值

avatar
文章
阅读
粉丝