3.04.08localStorage与sessionStorage

3.04.08localStorage与sessionStorage

1.本地储存数据localStorage

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

    
    
    
    


    
客户端 本地储存数据 localStorage 对象

    

2.会话储存数据sessionStorage

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

    
    
    
    


    
会话储存数据 sessionStorage 对象
    
    

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');            // true
    JSON.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 参数的 不详解