JavaScript【JSON和Web存储】

在JSON之前使用XML传递数据，XML是一种纯文本格式，适合在网络上交换数据，但是XML格式比较复杂，解析困难；所以现在利用JSON轻量级的数据交换格式，更易于人阅读和编写，同时也易于机器解析和生成，并采用完全使JSON成为理想的数据交换语言。
前后端分离项目中，前端和后端进行数据交换格式大多数都是以JSON形式进行转换

5.1 JSON对象形式

//对象中包含若干属性，属性以“键值对”的形式书写。
//json数据格式语法：
let user = {
    userId:1,
    userName:'张三',
    userSex:'男'
}
console.log(user.userId);
console.log(user.userName);
console.log(user.userSex);

5.2 JSON数组形式

//一个json数组中包含多个json对象。
let userArr = [
    {
        userId:1,
        userName:'张三',
        userSex:'男'
    },{
        userId:2,
        userName:'李四',
        userSex:'女'
    },{
        userId:3,
        userName:'王五',
        userSex:'男'
    }
]
//获取json数组中某一个json对象
let user = userArr[0];
console.log(user.userId);
console.log(user.userName);
console.log(user.userSex);
//遍历json数组
for(let i=0;i<userArr.length;i++){
    console.log(userArr[i].userId,userArr[i].userName,userArr[i].userSex);
}

5.3 JSON与字符串之间的转换

JavaScript中内置了一个JSON对象，可以用来进行json与字符串之间的转换

JSON转换成字符串：使用JSON.stringify( )

let user = {
    userId:1,
    userName:'张三',
    userSex:'男'
}
let str = JSON.stringify(user);
console.log(str);      //{"userId":1,"userName":"张三","userSex":"男"}

let userArr = [
    {
        userId:1,
        userName:'张三',
        userSex:'男'
    },{
        userId:2,
        userName:'李四',
        userSex:'女'
    },{
        userId:3,
        userName:'王五',
        userSex:'男'
    }
]
let str = JSON.stringify(userArr);
console.log(str);    //[{"userId":1,"userName":"张三","userSex":"男"}, ... ]

字符串转换成JSON：使用JSON.parse( )

let user = {
    userId:1,
    userName:'张三',
    userSex:'男'
}
let str = JSON.stringify(user);
let new_user = JSON.parse(str);
console.log(new_user);

6.1 Web存储

在Web引用开发中，除了像数据库中永久保存数据之后，还需要数据的临时存储，所以可以将数据临时存储到客户端（客户端存储LocalStorage）或者服务器端（服务器端数据存储SessionStorage）

Web存储技术主要有：SessionStorage / LocalStorage / WebSQL / indexedDB / Cookies

SessionStorage

从打开一个浏览器窗口开始，到此浏览器窗口关闭结束，这个范围叫做session范围（会话范围）。SessionStorage 存储有效范围就是一个session范围。
当关闭浏览器后，再次打开浏览器中查看，就会发现SessionStorage中存储的数据已经没有了。那是因为，当浏览器关闭后，一个session会话范围就结束了，那么SessionStorage中的数据自然也就没有了。

SessionStorage 中有三个主要方法，能够进行数据的存储：
【1】setItem()：该方法接受一个键和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值著作权归作者所有。
【2】 getItem()：该方法接受一个键名作为参数，返回键名对应的值。
【3】 removeItem()：该方法接受一个键名作为参数，并把该键名从存储中删除著作权归作者所有。

//向sessionStorage存入数据
sessionStorage.setItem('user','张三');
//从sessionStorage中取出数据
let str = sessionStorage.getItem('user');
console.log(str);       //张三

LocalStorage

永久存储。只要不主动从LocalStorage中将数据移除，那么LocalStorage种的数据就始终存在。LocalStorage中的方法与SessionStorage 中的方法完全一样。
当关闭浏览器后，再次打开浏览器中查看，就会发现LocalStorage中存储的数据仍然还在。

//向localStorage存入数据
localStorage.setItem('user','张三');
//从localStorage中取出数据
let str = localStorage.getItem('user');
console.log(str);       //张三

存储对象

SessionStorage 和LocalStorage中只能存储字符串数据。但有时我们可能需要存储对象，此时可以将对象转换为字符串进行存储，待取出时，再将字符串转换为对象。

let user = {
  userId:1,
  userName:'张三',
  userSex:'男'
};   
//将对象转换成字符串，进行存储
sessionStorage.setItem('user',JSON.stringify(user));
//将取出的字符串，转换成对象    
let obj = JSON.parse(sessionStorage.getItem('user'));
console.log(obj);