3.04.08localStorage与sessionStorage

1.本地储存数据localStorage

cookie是浏览器缓存数据的一种机制。cookie有大小限制。在同一个服务器下，且同一个浏览器下，才可以共享数据
localStorage 是新增缓存数据的方式。没有大小限制，可以永久保存数据
localStorage在同一个浏览器下就可以共享数据
其存于电脑的磁盘上：C:\Users\宽\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb
用法：

<!DOCTYPE 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><h3>客户端 本地储存数据 localStorage 对象</h3><script>// cookie 是浏览器缓存数据的一种机制。 cookie 有大小限制// localStorage 是新增缓存数据的方式。 没有大小限制，可以永久保存数据// 作用：// 1.共享一套数据// 2.在当前浏览器就可以获取储存的数据// 3.数据是永久保存的// 用户名称var userName = "adminxxx";// 设置本地储存(先储存数据)localStorage.setItem("userName",userName);// 获取本地储存（然后取数据）var _userName = localStorage.getItem("userName");// 删除储存(指定的数据)localStorage.removeItem("userName");// 删除所有储存的数据localStorage.clear();</script></body>
</html>

2.会话储存数据sessionStorage

localStorage：永久性的保存在浏览器客户端，只要设置了本地储存，那么在浏览器的任意窗口打开页面都可以获取储存的数据
sessionStorage 不是永久的保存数据，页面关闭，数据就消失，不能在浏览器的另一个窗口获取会话储存的数据（仅仅在当前窗口下共享数据）
用法：

<!DOCTYPE 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><h3>会话储存数据 sessionStorage 对象</h3><script>// 定义颜色var myColor = "red";// 设置会话储存数据sessionStorage.setItem("myColor",myColor);// 获取会话储存的数据var _color = sessionStorage.getItem("myColor");// console.log(_color);// red// 删除会话储存（指定的）// sessionStorage.removeItem("myColor");// 删除所有的会话储存// sessionStorage.clear();</script>
</body>
</html>

3.认识JSON

JSON 是一种按照JavaScript对象语法的数据格式。虽然它是基于 JavaScript 语法，但它独立于JavaScript，这也是为什么许多程序环境能够读取（解读）和生成 JSON。
JSON有两种意义。JSON可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON 数据。JavaScript 提供一个全局的可访问的 JSON 对象来对这两种数据进行转换。
很多地方都可以存放JSON格式的数据，比如localStorage与sessionStorage

1. JSON 数据

JSON 数据的格式很严格，多一个逗号，少一个逗号都不行
JSON 数据的结构形式1：

    {"squadName" : "Super hero squad","homeTown" : "Metro City","formed" : 2016,"secretBase" : "Super tower","active" : true,"members" : [{"name" : "Molecule Man","age" : 29,"secretIdentity" : "Dan Jukes","powers" : ["Radiation resistance","Turning tiny","Radiation blast"]},{"name" : "Madame Uppercut","age" : 39,"secretIdentity" : "Jane Wilson","powers" : ["Million tonne punch","Damage resistance","Superhuman reflexes"]},{"name" : "Eternal Flame","age" : 1000000,"secretIdentity" : "Unknown","powers" : ["Immortality","Heat Immunity","Inferno","Teleportation","Interdimensional travel"]}]}

JSON 数据的结构形式2：(JSON数组)

[{"name" : "Molecule Man","age" : 29,"secretIdentity" : "Dan Jukes","powers" : ["Radiation resistance","Turning tiny","Radiation blast"]},{"name" : "Madame Uppercut","age" : 39,"secretIdentity" : "Jane Wilson","powers" : ["Million tonne punch","Damage resistance","Superhuman reflexes"]}
]

以上两种数据结构访问数据的形式与平常用的对象与数组访问数据的形式一样，比如，在数据结构1中，如果我们要加载对象进入 JavaScript 程序，以保存为一个名为 superHeroes 对象为例，我们使用 . 或 [] 访问对象内的数据superHeroes.hometown或者superHeroes[“active”]，在数据结构2中，只需要通过数组索引就可以访问数组元素，如【0】【“powers”】【0】

2.JSON对象

JSON对象包含两个方法: 用于解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及将对象/值转换为 JSON字符串的 stringify() 方法。
JSON.parse()
- 解析JSON字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性, 在返回之前进行某些修改。
- 语法：JSON.parse(text[, reviver])
- 参数：
  - text 要被解析成 JavaScript 值的字符串，关于JSON的语法格式,请参考：JSON。
  - reviver 可选。转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。
  - 返回值 Object 类型, 对应给定 JSON 文本的对象/值。
用法：

 JSON.parse('{}');              // {}JSON.parse('true');            // trueJSON.parse('"foo"');           // "foo"JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]JSON.parse('null');            // null//如果指定了 reviver 函数，则解析出的 JavaScript 值（解析值）会经过一次转换后才将被最终返回（返回值）。更具体点讲就是：解析值本身以及它所包含的所有属性，会按照一定的顺序（从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身）分别的去调用 reviver 函数，在调用过程中，当前属性所属的对象会作为 this 值，当前属性名和属性值会分别作为第一个和第二个参数传入 reviver 中。如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。//当遍历到最顶层的值（解析值）时，传入 reviver 函数的参数会是空字符串 ""（因为此时已经没有真正的属性）和当前的解析值（有可能已经被修改过了），当前的 this 值会是 {"": 修改过的解析值}，在编写 reviver 函数时，要注意到这个特例。（这个函数的遍历顺序依照：从最内层开始，按照层级顺序，依次向外遍历）JSON.parse('{"p": 5}', function (k, v) {if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，return v * 2;              // 否则将属性值变为原来的 2 倍。});                            // { p: 10 }JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，// 最后一个属性名会是个空字符串。return v;       // 返回原始属性值，相当于没有传递 reviver 参数。});// 1// 2// 4// 6// 5// 3// ""

JSON.stringify()
- 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。
- 语法：JSON.stringify(value[, replacer [, space]])
- 参数：
  - value 将要序列化成一个 JSON 字符串的值。
  - replacer 可选。如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
  - space 可选。指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。
  - 返回值一个表示给定值的JSON字符串。
用法：

 //转换值如果有 toJSON() 方法，该方法定义什么值将被序列化。//非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。//布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。//undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).//对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。//所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。//Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。//NaN 和 Infinity 格式的数值及 null 都会被当做 null。//其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。JSON.stringify({});                        // '{}'JSON.stringify(true);                      // 'true'JSON.stringify("foo");                     // '"foo"'JSON.stringify([1, "false", false]);       // '[1,"false",false]'JSON.stringify({ x: 5 });                  // '{"x":5}'JSON.stringify({x: 5, y: 6});      // "{"x":5,"y":6}"    带replacer参数 与 space 参数的 不详解

3.04.08localStorage与sessionStorage相关推荐

html5客户端本地存储之sessionStorage及storage事件
首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)> sessionStorage和上文中提到的localStorage非常 ...
04 面试题2-比较老
04 面试题2-比较老 # 前端面试题及答案这个面试题感觉有点老基础知识 ### 1 Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1). 声明位于文档中的最前面,处于标签 ...
docker 配置使用宿主机的GPU（ubuntu16.04+cuda10.0+cudnn7）
1. 安装 Docker 卸载旧版本 Docker sudo apt-get remove docker docker-engine docker.io containerd runc 安装新版本 s ...
Ubuntu 16.04 安装后修改屏幕分辨率(xrandr: Failed to get size of gamma for output default)
ubuntu 16.04 安装后分辨率只有一个选项 1024x768,使用 xrandr 命令出现错误: xrandr: Failed to get size of gamma for output ...
Ubuntu 16.04 安装 Docker - Dependency failed for Docker Application Container
Docker 安装由于 apt 官方库里的 Docker 版本可能比较旧,所以先卸载可能存在的旧版本: sudo apt-get remove docker docker-engine docker ...
【Docker】Ubuntu18.04国内源安装Docker-准备工作(一）
前言: 安装docker由于很多教程都使用国外源和阿里源,安装失败,这里总结一种国内源的安装方法,亲测有效! 过程: 步骤1:在服务器上创建虚拟机远程连接服务器,win+R--输入mstsc---- ...
在Ubuntu18.04上安装opencv 3.4.1
对于安装opencv有的人一次就成功,而有人安装了N多次才成功.我就是那个安装了N多次的人,每次遇到了很多安装错误,只能通过到网上搜教程资料,解决方法:通过一次次的试错,最终完成了安装.再此提醒第一次 ...
Go 中 time.Parse 报错：year/month/day hour/minute/second out of range 时间格式化为什么是 2006-01-02 15:04:05？
1. 问题现象在使用 Go 语言的 time.Parse 解析时间时遇到以下错误: func main() {timeParse, err := time.Parse("2006-11-0 ...
Go 学习笔记（25）— 并发（04）[有缓冲/无缓冲通道、WaitGroup 协程同步、select 多路监听通道、close 关闭通道、channel 传参或作为结构体成员]
1. 无缓冲的通道无缓冲的通道(unbuffered channel)是指在接收前没有能力保存任何值的通道. 这种类型的通道要求发送 goroutine 和接收 goroutine 同时准备好,才能 ...

3.04.08localStorage与sessionStorage

3.04.08localStorage与sessionStorage

1.本地储存数据localStorage

2.会话储存数据sessionStorage

3.认识JSON

1. JSON 数据

2.JSON对象

3.04.08localStorage与sessionStorage相关推荐

最新文章

热门文章