目录
- json字符串
- localStorage 本地存储
- sessionstorage
json字符串
- json字符串就是：json格式的字符串
“abc123truelkgsjhgo” 普通字符串
“< h1 >hgahgo< /h1 >” html格式字符串
键值对格式 键和值都需要用双引号去包括
‘“name”:“yasuo”’
json用途：
在网络传输时使用。 比如前后端交互。
不能够传输对象和数组的。
只能通过字符串形式去传输数据。
所以说我们如果要传输对象和数组，我们需要将其转换为字符串。
json格式就是满足对象和数组数据结构的一种字符串
json的使用方法：
JSON.parse()
把json格式的字符串转为js中的数组或对象
json.stringify()
把js中的数组或对象转为json字符串
<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 本地存储
- 储存本地的好处：
不会对服务器造成负担
提高访问速度
- 局限性：
会占用本地内存
重要的信息不安全
三种本地储存方式：
localstorage h5新增的 IE8以下不兼容 5MB存储空间
sessionstorage 5MB存储空间
cookie 4KB存储空间
localStorage 优点：
容量比cookie要大
局限：
有兼容性问题
不会被爬虫获取
本质上是对字符串的读取操作，比较频繁，存储的内容比较多，会导致页面卡顿。
使用：
1.先考虑兼容性问题
if(!window.localStorage){
alert(“该浏览器不支持localstorage！”)
return false;
}else{
//业务逻辑
}2.将数组存储到localstorage
三种写法：
storage[“name”] = “yasuo”;
storage.setItem(“name”,“sss”)
storage.age = 18;3.读取
storage[“键”];
storage.getItem(“键”)
storage.键;4.删除
storage.removeItem(“age”);5.修改：
用同一个键去赋不同的值就是修改
6.清除全部
storage.clear();
7.获取所有的键值
for (var i = 0; i < storage.length; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
}【注意】 localstorage只能存储字符串,如果将对象或者数组放入，取出来时是string类的数据。
如果要存储对象或数组，则先将对象或者数组转为json的字符串，然后再存储，需要时，取出并将其转为对象或数组使用、。
存储事件：永久存储的
同源性：
不同的域名下存储的数据是不共通的
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
存储空间：5M
它与 localstorage 的用法基本一样
它们两个的共同点：
都是将数据存储在本地中
只能存储字符串
区别：
localstorage 永久存储的 除非手动删除
sessionstorage 会话缓存
会话结束时失效
1.代码控制结束
2.浏览器关闭/窗口关闭
