前端基础学习——JavaScript之JSON与Web储存介绍

前面还有JavaScript基础介绍，有兴趣的朋友可以前往查看前端基础学习——带你夯实JavaScript基础

一. JSON轻量级数据交换格式

1.1 json简介

    正如我们在java中，使用实体对象来存储一个实体数据一样，在javaScript中，我们也需要这样一种对象，来存储一个实体数据。而且，此种对象将来也可以作为前端与服务器端进行数据交互的载体。

    在json出现之前，大家都用 XML 传递数据。XML 是一种纯文本格式，所以适合在网络上交换数据，但是 XML 格式比较复杂，解析困难。终于道格拉斯•克罗克福特（Douglas Crockford）发明了JSON 这种超轻量级的数据交换格式。

    JSON(JavaScript Object Notation)

• 是一种轻量级的数据交换格式。
• 易于人阅读和编写，同时也易于机器解析和生成。
• JSON采用完全独立于语言的文本格式。

上面这些特性使JSON成为理想的数据交换语言。

1.2 json数据格式语法

• json对象形式：对象中包含若干属性，属性以 ”键值对“ 的形式书写。

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

• 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);
}

1.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);

二. Web存储

• 第一种在客户端存储的技术叫做Cookie，它是网站的身份证。是网站为了辨别用户身份，进行session（服务端的session）跟踪而存储在用户本地终端上的数据。也就是说它是存在电脑硬盘上的，一个很小的txt类型的文件。Cookie每次都会跟随http请求发送到服务端，也就是说每一个http请求都会带上我们的cookie数据，因此它存在一个安全性的问题。
• cookie本身也是有很大的局限性的，首先它很小，主流的浏览器最大支持 4096 字节，除了最大字节的限制，每个网站的cookie个数（也就是每一个first每一个域）也是有限制的，一般浏览器是20个。除此之外，cookie还会默认跟随所有http请求发送，即使不需要使用这个cookie来鉴别用户但是它也是会跟随http请求发送的，这样就会造成一个网络资源的浪费。然后部分的浏览器还限制了总的cookie个数300个。
• 在cookie的诸多局限性下，Web Storage应运而生。Web Storage 解决了很多问题： 比如它支持存储大量数据，支持复杂的本地数据库，而且也不会默认跟随http请求。

    Web Storage技术主要是有五个：

• SessionStorage

• LocalStorage

• WebSQL （sql）

• indexedDB （no sql）

• Cookies

    这里主要介绍 SessionStorage 与 LocalStorage
  

2.1 SessionStorage

SessionStorage : 从打开一个浏览器窗口开始，到此浏览器窗口关闭结束，这个范围叫做session范围（会话范围）。那么，SessionStorage 存储有效范围就是一个session范围。

    SessionStorage 中有三个主要方法，能够进行数据的存储：

• setItem()： 该方法接受一个键和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值著作权归作者所有。
• getItem()：该方法接受一个键名作为参数，返回键名对应的值。
• removeItem()：该方法接受一个键名作为参数，并把该键名从存储中删除著作权归作者所有。

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

上面代码运行后，在浏览器中就可以看到存储结果：

注意：当关闭浏览器后，再次打开浏览器中查看，就会发现SessionStorage中存储的数据已经没有了。那是因为，当浏览器关闭后，一个session会话范围就结束了，那么SessionStorage中的数据自然也就没有了。

2.2 LocalStorage

**LocalStorage： **永久存储。只要不主动从LocalStorage中将数据移除，那么LocalStorage种的数据就始终存在。

LocalStorage中的方法与SessionStorage 中的方法完全一样。

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

上面代码运行后，在浏览器中就可以看到存储结果：

注意：当关闭浏览器后，再次打开浏览器中查看，就会发现LocalStorage中存储的数据仍然还在。

1.3.存储对象

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

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

三. 前端学习专栏

https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482