table of Contents
json string
- json string is: string in json format
"Abc123truelkgsjhgo" ordinary string
"< h1 >hgahgo</h1 >" html format string
Key-value pair format keys and values need to be enclosed in double quotes to include
'"name":"yasuo"'
json purpose:
Used during network transmission. Such as front-end and back-end interaction.
Cannot transfer objects and arrays.
Data can only be transmitted in the form of strings.
So if we want to transfer objects and arrays, we need to convert them to strings.
The json format is a string that satisfies the data structure of objects and arrays
How to use json:
JSON.parse()
Convert a string in json format to an array or object in js
json.stringify()
Convert an array or object in js into a json string
<script>
//--------------------------------------------------------
var str = [1, 2, 3, 4];
var sss = JSON.stringify(str); //把数组转换成为字符串
console.log(sss);
console.log(typeof sss);
//--------------------------------------------------------
var str = ["亚索", true, 3, 4];
var sss = JSON.stringify(str); //把数组转换成为字符串
console.log(sss);
console.log(typeof sss);
//--------------------------------------------------------
var str = ["亚索", true, 3, 4];
var sss = JSON.stringify(str); //把数组转换成为字符串
var ccc = JSON.parse(sss); //把json字符串格式的字符串转换成为数组
console.log(ccc);
console.log(typeof ccc);
//--------------------------------------------------------
var str = [{
name: "亚索",
eag: 18,
skill: "狂风绝息斩"
}, {
name: "孙悟空",
eag: 1800,
skill: "大招"
}, {
name: "赵云",
eag: 18,
skill: "不记得"
}]
var ssa = JSON.stringify(str); //把数组转为字符串
console.log(ssa);
console.log(typeof ssa);
//--------------------------------------------------------
var str = [{
name: "亚索",
eag: 18,
skill: "狂风绝息斩"
}, {
name: "孙悟空",
eag: 1800,
skill: "大招"
}, {
name: "赵云",
eag: 18,
skill: "不记得"
}]
var ssa = JSON.stringify(str); //把数组转为字符串
var cxcc = JSON.parse(ssa); //把json字符串格式的字符串转换成为对象
console.log(cxcc);
console.log(typeof cxcc);
//--------------------------------------------------------
var str = [
'"name":"yasuo"',
'"eag":"18"',
'"skill":"狂风绝息斩"',
'"name":"yasuo"',
'"eag":"18"',
'"skill":"狂风绝息斩"',
{
"name": "yasuo",
"eag": "18",
"skill": "狂风绝息斩"
}
]
var sss = JSON.stringify(str)
var ccc = JSON.parse(sss);
// console.log(sss);
// console.log(typeof sss);
console.log(ccc);
console.log(typeof ccc);
</script>
localStorage local storage
- The benefits of storing locally:
Will not burden the server
Improve access speed
- limitation:
Will take up local memory
Important information is not safe
Three local storage methods:
Localstorage h5 is not compatible with 5MB storage space below IE8
sessionstorage 5MB storage space
Cookie 4KB storage space
Advantages of localStorage:
Capacity is larger than cookie
Limitations:
Have compatibility issues
Won't be acquired by crawlers
Essentially, it is a read operation of a string, which is more frequent and more stored content, which will cause the page to freeze.
use:
1. Consider compatibility issues first
if(!window.localStorage){
alert("This browser does not support localstorage!")
return false;
}else{
//Business logic
}
2. Store the array to localstorage
Three ways of writing:
storage[“name”] = “yasuo”;
storage.setItem(“name”,“sss”)
storage.age = 18;
3. Read
storage[“键”];
storage.getItem(“键”)
storage.键;
4. Delete
storage.removeItem(“age”);
5. Modify:
Using the same key to assign different values is to modify
6. Clear all
storage.clear();
7. Get all the key values
for (var i = 0; i < storage.length; i++) {
var key = storage.key (i);
var value = storage.getItem(key);
}
[Note] localstorage can only store strings. If you put an object or an array in, it will be string data when it is taken out.
If you want to store an object or an array, first convert the object or array to a json string, and then store it. When necessary, take it out and convert it to an object or array for use.
Storage events: permanently stored
Homology:
The data stored under different domain names are not common
eg：
<script>
//判断浏览器是否支持
if (!window.localStorage) {
alert("该浏览器不支持localStorage");
} else {
//写入执行的业务逻辑
var storage = window.localStorage;
//将数据存储到本地的三种写法:
storage["name"] = "yasuo"; //给storage赋值 第一种
storage.setItem("age", "18");; //第二种
storage.skill = "buzhidaoaa" //第三种
//------------------------------------------------------
storage.setItem("name", "zhaoyun"); //给storage的name值修改
storage.setItem("age", "18");
storage.setItem("skill", "buzhidao");
//------------------------------------------------------
//读取键值的三种方法：
console.log(storage.getItem("name")) //读取storage的name值
console.log(storage.age)
console.log(storage["skill"])
//------------------------------------------------------
//删除
storage.removeItem("name") //name的值在本地就会被删除掉
//------------------------------------------------------
// 修改 用同一个键去赋不同的值就是修改
storage.setItem("name", "zhaoyun");
//------------------------------------------------------
// 清除全部
storage.clear();
//------------------------------------------------------
// 获取所有的键值
for (i = 0; i < storage.length; i++) {
var sss = storage.key(i);
var valer = storage.getItem(sss);
console.log("sss=" + sss + ",valer=" + valer);
}
}
</script>
sessionstorage
Storage space: 5M
, the usage is basically the same as localstorage
What they have in common:
Store data locally
Can only store strings
the difference:
localstorage is permanently stored unless manually deleted
sessionstorage session cache
Invalidation at the end of the session
1. End of code control
2. Browser closed/window closed