JavaScript之JSON知识与几种Web储存技术介绍

傷城~ 2023-09-28 14:00 13阅读 0赞

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

--------------------

**目录**

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

1.1 json简介

1.2 json数据格式语法

1.3 json与字符串之间的转换

二. Web存储

2.1 SessionStorage

2.2 LocalStorage

1.3.存储对象

三. 前端学习专栏

--------------------

## 一. 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对象。

### 1.3 json与字符串之间的转换 ###

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

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

*  字符串转换成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);       //张三

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

![c1912c168f92f6e84e9e44b11d62060b.png][]

> 注意：当关闭浏览器后，再次打开浏览器中查看，就会发现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.5482![icon-default.png_t_M5H6][]https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482][https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M5H6_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]

[JavaScript]: https://blog.csdn.net/weixin_53919192/article/details/125619799?spm=1001.2014.3001.5501
[c1912c168f92f6e84e9e44b11d62060b.png]: https://img-blog.csdnimg.cn/img_convert/c1912c168f92f6e84e9e44b11d62060b.png
[icon-default.png_t_M5H6]: https://csdnimg.cn/release/blog_editor_html/release2.1.4/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M5H6
[https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M5H6_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]: https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482