18-JSON和浏览器数据存储

JSON

一、JSON介绍

json格式的文本，是所有编程语言都能识别的，在所有编程语言中都是同一个语法格式

元素的值可以是number,string(双引号),null,bollean,array,obj

json格式的文件主要用于前后端交互来传递数据。

为什么使用json格式传递数据？

• json格式体积小，一般把json叫做轻量级的数据交换格式（早期使用XML格式）
• 所有语言都能识别json格式
• 便于解析

{
    "name":"lucy",
    "age":12,
    "like":["sleep","eat"],
    "vip":false,
    "family":{
        "mother":"韩梅梅",
        "father":"李雷",
        "pet":"dog"
    },
    "sister":null
}
1
2
3
4
5
6
7
8
9
10
11
12

二、JSON的两个方法

1. 把js的对象或数组转化为json字符串

语法：JSON.stringify(js对象或数组)

返回值：json字符串

const data = {
    "name":"lucy",
    "age":12,
    "vip":false,
};
const jsonStr = JSON.stringify(data);
console.log(jsonStr);
1
2
3
4
5
6
7

2. 把接收到的后端的json字符串转换成js对象或数组

语法：JSON.parse(json字符串)

返回值：js对象或数组

const jsonStr = '{"name":"lucy"}';
const data = JSON.parse(jsonStr);
console.log(data)
1
2
3

本地存储和会话存储

本地存储 localStorage 和会话存储 sessionStorage 是浏览器里面的一个存储空间，
同一个域名下的不同页面可以共享同一个存储空间。

如：
同是file:// 开头的文件可以共享一个存储空间，
同是http://127.0.0.1:xxxx/ 开头的文件可以同享一个存储空间

一、区别

本地存储会一直存储在浏览器中，除非手动删除

会话存储只要关闭浏览器，就会被浏览器自动删除

它们的操作方法是一样的，只是存在的时间不同

console.log(localStorage);
console.log(sessionStorage);
1
2

二、操作本地存储、会话存储的方式

1. 所有操作对象的方式都适用

// 增加
localStorage.name = "lucy";
// 删除
delete localStorage.name;
// 修改（重新赋值）
localStorage.name = "poly";
// 查询
console.log(localStorage.name);
// 注意：存储到本地存储键和值都必须是字符串格式，如果不是，会强制转换
localStorage.like = {name:"lucy",age:12};
localStorage.family = ["小张","小李"]
// 如果一定要存储对象和数组，可转换为json字符串再存储
localStorage.like = JSON.stringify({name:"lucy",age:12});
localStorage.family = JSON.stringify(["小张","小李"]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 现成操作存储的api

// 新增：localStorage.setItem(key,value)
localStorage.setItem("age",12);
// 删除: localStorage.removeItem(key)
localStorage.removeItem("name");
// 新增一个相同的key就是修改
localStorage.setItem("age",18);
// 获取：localStorage.getItem(key)
console.log(localStorage.getItem("like"))
// 清空：localStorage.clear()
1
2
3
4
5
6
7
8
9

注意：

• 键和值都是字符串，如果传入的不是字符串，会被强制转换
• 同源下的本地存储内容可以共享
• 同源下的键是唯一的