JSON-数据存储

json：是一种数据格式，在服务器和客户端之间传输的数据格式

json使用场景：

1 网络数据的传输json数据

2 项目的某些配置文件

3 非关系型数据库，将json作为存储格式 （直接将json存到数据库）

json支持三种类型的值：json不支持注释

简单值：数字，字符串（不支持单引号），布尔值， null类型（不支持undefined）

"abc"

对象值：由key,value 组成，key是字符串类型，必须是双引号，值可以是简单值，对象值，数组值

{
  "a":123,
  "b":false,
  "c":[1,2,3]
}

数组值：数组值可以是简单值，对象值，数组值

[
  123,
 {

  "b":false,
  "c":[1,2,3]
}
]

给localStorage存值：

const obj = {
  name:'wy',
  age:18,
  friends:{
    name: 'John',
  },
  like:['eat','paly']
};
// 存到localStorage  第二个参数要字符串类型 第二个参数是[object,Object]
localStorage.setItem('obj',obj) 
// 将obj转成json字符串
objString = JSON.stringify(obj)
localStorage.setItem('obj', objString) 
const jsonString  = localStorage.getItem('obj')
// 将json 格式字符串转为对象
const info = JSON.parse(jsonString)

 

 stringify的第二个参数replacer

// 将obj转成json字符串
objString = JSON.stringify(obj)
console.log(objString,'objString');
// stringify第二个参数replacer
//  1传入数组 
objString2 = JSON.stringify(obj,["name","age"])
console.log(objString2,'objString2');
//  2传入回调函数
objString3 = JSON.stringify(obj, (key, value) => {
  if(key === 'age') {
    return value+1
  }
  return value
})
console.log(objString3, 'objString3');

  stringify的第三个参数replacer

objString = JSON.stringify(obj)
console.log(objString,'objString');
// stringify第三个参数replacer 数字/字符串 控制缩进
objString2 = JSON.stringify(obj,null,2)
console.log(objString2,'objString2');

 

objString2 = JSON.stringify(obj,null,‘==’)
console.log(objString2,'objString2');

来，我们见识一下toJSON的厉害 （可以固定最终转成的形式）

const obj = {
  name: 'wy',
  age: 18,
  friends: {
    name: 'John',
  },
  like: ['eat', 'paly'],
  toJSON:function(){
    return '看我的'
  }
};
// 将obj转成json字符串
objString = JSON.stringify(obj)
console.log(objString,'objString');
// stringify第三个参数replacer 数字/字符串 控制锁进
objString2 = JSON.stringify(obj,null,'==')
console.log(objString2,'objString2');

 JSON.stringify+JSON.parse实现对象拷贝

 赋值：同一片内存

const obj = {
  name: 'wy',
  age: 18,
  friends: {
    name: 'John',
  },
  like: ['eat', 'paly']
};
// 将obj内容放到info
// 1 引用赋值： // info 和 obj是同一片内存
   let info = obj
   obj.name = 'ww'
   console.log(info.name); // ww

浅拷贝：不同内存地址，但是里面的对象依然指向相同地址

let info2 = {...obj}
obj.name = 'ww'
obj.like.push('sleep')
console.log(info2);

深拷贝：  stringify+parse实现(不会处理函数，js不处理函数，直接移除掉，undefeated，symbol也会被忽略)

 const jsonString  = JSON.stringify(obj)
 const info3 = JSON.parse(jsonString)
 obj.name = 'ww'
 obj.like.push('sleep')
 console.log(info3,'info3');

数据存储

webStorage主要提供了一种机制，让浏览器提供了比cookie更直观的key,value存储方式

 localStorage：本地存储，永久存储，关掉网页打开，依然存在

sessionStorage：会话存储，本次会话的存储器，关掉会话存储的内容会被清除

 localStorage VS sessionStorage的一个区别：

常见属性和方法：

// 1 setItem
localStorage.setItem('name','oo')
localStorage.setItem('age', '18')

// 2 lenght localStorage.length
for(var i=0; i<localStorage.length; i++){
// 3 key方法 获取某个索引对应的key
  const key = localStorage.key(i)
  console.log(key,'key');
// 4 getItem 方法
  console.log(localStorage.getItem(key));
}
// 5 removeItem 
localStorage.removeItem('age')
// 6 clear 方法
localStorage.clear()

 

cookie 里面的数据大多都是服务器存的，服务器会有一个setCookie （客户端一般不从这存）