（31）2021-01-20（JSON字符串和本地存储）

JSON字符串和本地存储

一、json字符串
二、示例
- 1、对象或数组转JSON字符串
- - 使用方法：JSON.stringify(数组或对象)
- 2、JSON字符串转对象或数组
- - 使用方法：JSON.parse(Json字符串)
三、本地存储
- 1、本地存储与服务器存储
- 2、localstorage
- 3、sessionstorage
- 4、cookie
- - 1、cookie介绍
  - 2、cookie的使用方法
  - 3、cookie封装函数
- 5、知识点
- 6、案例：足迹
- 7、模板字符串
- 8、模板引擎

一、json字符串

普通字符串 “abc123truelkgsjhgo”
html格式字符串

 "<h1>hgahgo</h1>"

json格式的字符串
键值对格式。 ‘“name”:“yasuo”’
键和值都需要用双引号去包括。
json用途：
在网络传输时使用。比如前后端交互，不能够传输对象和数组的。只能通过字符串形式去传输数据。
所以说我们如果要传输对象和数组，我们需要将其转换为字符串。
json格式就是满足对象和数组数据结构的一种字符串。
json的使用方法：
1、JSON.parse()
把json格式的字符串转为js中的数组或对象。
2、 JSON.stringify()
把js中的数组或对象转为json字符串。
把对象转字符串：
‘{“属性名”:“属性值”,“属性名2”:“属性值2”,“属性名3”:“属性值3”}’
把数组转字符串：
1.数组的存储数据不是对象。
‘[1,2,3,4]’
2.数组的存储数据为对象
‘[{“name”:“亚索”,“age”:“28”,“skill”:“狂风绝息斩”},{“name”:“劫”,“age”:20,“skill”:“瞬狱影杀阵”}]’

【注】
1、数字和布尔值可以不用带双引号。
2、对象在转json字符串时，函数会被自动过滤掉。
3、 parse() 这个方法会新创建一个对象或数组。
4、错误信息（格式）：
VM14:1 Uncaught SyntaxError: Unexpected token 亚 in JSON at position 8

二、示例

1、对象或数组转JSON字符串

使用方法：JSON.stringify(数组或对象)

一、对象转JSON字符串
<script>var obj = {name: "亚索",age: "28",skill: "狂风绝息斩",fn: function() {console.log("我是函数");}}var str = JSON.stringify(obj);console.log(str);// 一、对象转JSON字符串：//输出结果： json字符串      '{"name":"亚索","age":"28","skill":"狂风绝息斩"}'// 对象在转json字符串时，函数会被自动过滤掉。
</script>

二、数组转JSON字符串：
<script>// 1、数组的存储数据不是对象var array1 = [1, 2, 3, 4];var str1 = JSON.stringify(array1);console.log(str1);// 输出结果：json字符串    '[1,2,3,4]'// 2、数组的存储数据是对象var array2 = [{name: "亚索",age: "28",skill: "狂风绝息斩"}, {name: "劫",age: 20,skill: "瞬狱影杀阵"}]var str2 = JSON.stringify(array2);console.log(str2);// 输出结果：   [{"name":"亚索","age":"28","skill":"狂风绝息斩"},{"name":"劫","age":20,"skill":"瞬狱影杀阵"}]// 二、数组转字符串：// 1、数组的存储数据不是对象// 输出结果：json字符串    '[1,2,3,4]'// 2、数组的存储数据是对象// 输出结果：json字符串    '[{"name":"亚索","age":"28","skill":"狂风绝息斩"},{"name":"劫","age":20,"skill":"瞬狱影杀阵"}]'</script>

2、JSON字符串转对象或数组

使用方法：JSON.parse(Json字符串)

一、JSON字符串转对象：
<script>// JSON字符串转对象：var str = '{"name":"亚索","age":"28","skill":"狂风绝息斩"}';var obj = JSON.parse(str);console.log(obj);
</script>

输出结果：

JSON字符串转数组：
<script>var str = '[1,2,3,4]';var obj = JSON.parse(str);console.log(obj);//输出结果： [1, 2, 3, 4]var str2 = '[{"name":"亚索","age":"28","skill":"狂风绝息斩"},{"name":"劫","age":20,"skill":"瞬狱影杀阵"}]';var obj2 = JSON.parse(str2);console.log(obj2);
</script>

输出结果：

三、本地存储

1、本地存储与服务器存储

本地存储
1、不会对服务器造成负担
2、提高访问速度
3、会占用本地内存
4、重要的信息不安全
localstorage： h5新增的 IE8以下不兼容 5MB
sessionstorage： 5M
cookie ： 4KB
服务器：
数据库

2、localstorage

优点：
容量比cookie要大
局限：
有兼容性问题
不会被爬虫获取
本质上是对字符串的读取操作，比较频繁，存储的内容比较多，会导致页面卡顿。
使用：

1、先考虑兼容性问题
if(!window.localStorage){
alert(“该浏览器不支持localstorage！”)
return false;
}else{
var storage = window.localStorage;
//业务逻辑
}

2、写入：将数据存储到localstorage
三种写法：
key、 value
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);
console.log(“key=” + key + “,value=” + value);
}

8、将对象转换成JSON字符串存储到localstorage中，再读取出来，转换成对象。
看下面代码示例。

【注意】
1、 localstorage只能存储字符串,如果将对象或者数组放入，取出来时是string类的数据。
2、如果要存储对象或数组，则先将对象或者数组转为json的字符串，然后再存储，需要时，取出并将其转为对象或数组使用。
3、存储时间：永久存储的
4、同源性：不同的域名下存储的数据是不共通的。

<script>// console.log(window.localStorage);// 1、先考虑兼容性问题if (!window.localStorage) {alert("该浏览器不支持localstorage！")} else {// 业务逻辑var storage = window.localStorage;// 2、写入：方式三种// storage["name"] = "yasuo";// storage.setItem("name", "yasuo");// storage.name = "yasuo";// 3、读取：方式三种// console.log(storage["name"]);// console.log(storage.getItem("name"));// console.log(storage.name);// 4、删除：// storage.removeItem("name");// 5、修改:用同一个键去赋不同的值就是修改// storage["name"] = "张三";// 6、清除全部:直接调用该方法// storage.clear();// 7、获取所有的键值// storage.name = "yasuo";// storage.age = 18;// storage.skill = "疾风";// for (var i = 0; i < storage.length; i++) {//     var key = storage.key(i);//     var value = storage.getItem(key);//     console.log("key=" + key + ",value=" + value);// }// 8、将对象转换成JSON字符串存储到localstorage中，在读取出来，转换成对象。//1.对象 var obj = {name: "yasuo",age: "18",}// 2.将对象转成JSON字符串var objStr = JSON.stringify(obj);// 3.将JSON字符串数据写入localstoragestorage.setItem("obj", objStr);// 4.读取JSON字符串var str = storage.getItem("obj");// 5.将JSON字符串转成对象var obj2 = JSON.parse(str);// 6.对象obj2不同于obj。（存储地址不是一个）console.log(obj2);console.log(obj);}</script>

（输出结果）：7、获取所有的键值。

3、sessionstorage

语法与localstorage一样。
把localStorage换成sessionStorage。

<script>if (!window.sessionStorage) {alert("该浏览器不支持sessionStorage！")} else {// 业务逻辑var session = window.sessionStorage;//写入：// session.setItem("name","yasuo")// session.setItem("age","18")// session.setItem("skill","hasaki")//读取：// console.log(session.getItem("name"));//删除：// session.removeItem("name")//清除全部：// session.clear();}</script>

localstorage与sessionStorage共同点：
1、都是将数据存储在本地中。
2、只能存储字符串。
区别：
localstorage 永久存储的除非手动删除。
sessionstorage 会话缓存，会话结束时失效。
会话结束：
1.代码控制结束
2.浏览器关闭/窗口关闭

4、cookie

1、cookie介绍

cookie:
用来存储浏览器端的本地数据

特点：
1.按照域名来存储的
不同的域名下的cookie数据不共通。
2.有存储的路径
127.0.0.1:8080/a/b.html cookie /a/b /
127.0.0.1:8080/b/b.html cookie /b/b
3.cookie 存储的数据格式
“键1=值1;键2=值2”
4.存储大小
4KB 50条左右
5.时效性：
默认是会话级别
我们可以手动设置cookie的过期时间
6.操作权限
前端可以操作
后端可以操作
7.发送请求时，cookie中的数据会被自动传输到后端
8.cookie只能在域名环境下才可以使用

2、cookie的使用方法

1、增（写入）
document.cookie = “键=值”;
【注】增加时一次只能增加一条
2、查（读取）
document.cookie
【注】一次时获取cookie中的所有内容
3、改
同一域名下
document.cookie = “键=新值”;
4、删
没有删除方法，有过期时间
如果要删除，则将该数据的有效期设置为过期即可。
5、有效期设置：(用于设定时间，删除该记录)
document.cookie = “键=值;expires=”+日期;
服务器的时间以格林威治事件为准的。

<script>// 写入(一次只能写入一条)document.cookie = "name=张三";document.cookie = "BD_UPN=123";// 读取(一次性获取cookie中的所有内容)// document.cookie;console.log(document.cookie);// 改(同一域名下)// document.cookie = "键=新值"// 有效期设置(用于设定时间，删除该记录)// document.cookie="键=值;expires="+ 日期document.cookie = "BD_UPN=123;expires=" + new Date("2021/01/20 06:46:50");</script>

有效期设置(用于设定时间，删除该记录)后：会删除该记录

解析cookie中的数据：

<script>document.cookie = "name=yasuo";document.cookie = "username=18";console.log(document.cookie);var arr1 = document.cookie.split(";");console.log(arr1);// 解析：cookie中的数据。// 方法一：var arr2 = arr1[0].split("=");var arr3 = arr1[1].split("=");console.log(arr2);// 获取键：console.log(arr2[0]);// 获取值：console.log(arr2[1]);console.log(arr3);// 获取键：console.log(arr3[0]);// 获取值：console.log(arr3[1]);// 方法二：遍历// for (var i = 0; i < arr1.length; i++) {//     console.log(arr1[i].split("="));//     console.log(arr1[i].split("=")[0]);//     console.log(arr1[i].split("=")[1]);// }</script>

3、cookie封装函数

    <title>Document</title><!-- 设置cookiename valueexpires --><script>/*** name  键value 值expires 过期时间   单位：s*/function setCookie(name, value, expires) {if (expires == null) {document.cookie = name + "=" + value;} else {var exDate = new Date();exDate.setTime(exDate.getTime() + 1000 * expires);document.cookie = name + "=" + value + ";expires=" + exDate.toUTCString();}}// 方法一：// key 键function getCookie(key) {if (document.cookie.length > 0) {var arr = document.cookie.split(";");for (var i = 0; i < arr.length; i++) {var t = arr[i].trim().split("=");if(t[0]===key){return t[1];}}}return "";}// 方法二;// key 键// function getCookie(key) {//     console.log(document.cookie);//     if (document.cookie.length > 0) {//         var start = document.cookie.indexOf(key + "=");//         if (start != -1) {//             var end = document.cookie.indexOf(";", start);//             if (end == -1) {//                 end = document.cookie.length;//            }//             return document.cookie.substring(start + key.length + 1, end);//         }//     }//    return "";//  }// indexof（字符串,start） 查找字符串，获取下标// start 表示开始截取的位置（下标，索引） end表示截取的位置（下标）  // substring(start,end) 截取字符串 setCookie("name", "yasuo");// setCookie("username", "18");console.log(getCookie("name"));</script>

5、知识点

indexof（字符串,start）查找字符串，获取下标
start 表示开始截取的位置（下标，索引） end表示截取的位置（下标）。
substring(start,end) 截取字符串

6、案例：足迹

（1）.进入页面先判断cookie中有没有足迹信息
1.1 有取出遍历之后放入到footprint中
1.2 没有就没有了呗

（2）.在点击li时，产生一条历史访问记录
2.1 将这条记录放入到cookie中，数组[] 转json字符串放入到cookie
2.2 放入时应该判断是否存在是的话，将原来的删除，新的放入没有的话，直接放入
2.3 历史记录是有长度显示的。最多只能存放三条，当你放入第四条的时候，应该删除第一条。

7、模板字符串

模板字符串
ES6之前，拼接字符串使用 +
ES6之后，一种新的字符串定义方式。 ``(反引号) 英文状态下，tab上方那个键位 ‘’
区别：
1.普通字符串不可以换行的模板字符串可以换行，且输出时，换行仍有效。
2.单引号与双引号不能在字符串中解析变量。
模板字符串可以解析**${ }**中的变量。
3.兼容性
低版本IE不兼容

模板字符串的使用：var recList = document.querySelector(".recommend-list");dataList.forEach(function (item, index) {var str = `<li class="recommend-item"><a href="javascript:;" target="_blank"><img alt="${item.proName}" width="140px" src="${item.imgUrl}"><div class="recommend-name">${item.proName}</div><div class="recommend-price">${item.proPrice}元</div><div class="recommend-tips">${item.proTips}万人好评</div></a><div class="recommend-action"><a href="javascript:void(0);"class="btn btn-small btn-line-primary" data-index="${index}">加入购物车</a></div><div class="recommend-notice"><a class="btn btn-block btn-green btn-notice">成功加入购物车</a></div></li>`recList.innerHTML += str;});

8、模板引擎

artTemplate
1.引入template的js
2.创建一个Script标签
2.1 id 随便起
2.2 type = text/html
3.使用template方法第一个参数为2.1的ID 第二个参数为一个对象
4.循环 {{each arr item index}} {{/each}}
each 关键字
arr 循环数组
item 表示每次循环中的元素
index 表示每次循环元素的下标索引
{{变量}} 可以在页面中输出变量也可以书写一些简单的表达式
5.if判断
格式：
{ {if 逻辑表达式 } }
表达式成立时执行的内容
{ {else} }
表达式不成立时执行的内容
{ {/if} }

<div id="box"><script id="test" type="text/html">{{age}}<ul>{{each arr item index}}<li>第{{index+1}}项----{{item}}</li>{{/each}}</ul>{{if flag}}大于18岁的才可以看到这些内容！ {{else}}未满18岁的请在家长陪同下观看{{/if}}</script></div>