JSON字符串和本地存儲(chǔ)

• • • 一、json字符串
    • 二、示例
    • • 1、對(duì)象或數(shù)組轉(zhuǎn)JSON字符串
      • • 使用方法：JSON.stringify(數(shù)組或?qū)ο?
      • 2、JSON字符串轉(zhuǎn)對(duì)象或數(shù)組
      • • 使用方法：JSON.parse(Json字符串)
    • 三、本地存儲(chǔ)
    • • 1、本地存儲(chǔ)與服務(wù)器存儲(chǔ)
      • 2、localstorage
      • 3、sessionstorage
      • 4、cookie
      • • 1、cookie介紹
        • 2、cookie的使用方法
        • 3、cookie封裝函數(shù)
      • 5、知識(shí)點(diǎn)
      • 6、案例：足跡
      • 7、模板字符串
      • 8、模板引擎

---

一、json字符串

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

"<h1>hgahgo</h1>"

• json格式的字符串
  鍵值對(duì)格式。 ‘“name”:“yasuo”’
  鍵和值都需要用雙引號(hào)去包括。

• json用途：
  在網(wǎng)絡(luò)傳輸時(shí)使用。 比如前后端交互， 不能夠傳輸對(duì)象和數(shù)組的。 只能通過(guò)字符串形式去傳輸數(shù)據(jù)。
  所以說(shuō)我們?nèi)绻獋鬏攲?duì)象和數(shù)組，我們需要將其轉(zhuǎn)換為字符串。
  json格式就是滿足對(duì)象和數(shù)組數(shù)據(jù)結(jié)構(gòu)的一種字符串。

• json的使用方法：
  1、JSON.parse()
  把json格式的字符串轉(zhuǎn)為js中的數(shù)組或?qū)ο蟆?br /> 2、 JSON.stringify()
  把js中的數(shù)組或?qū)ο筠D(zhuǎn)為json字符串。
  把對(duì)象轉(zhuǎn)字符串：
  ‘{“屬性名”:“屬性值”,“屬性名2”:“屬性值2”,“屬性名3”:“屬性值3”}’
  把數(shù)組轉(zhuǎn)字符串 ：
  1.數(shù)組的存儲(chǔ)數(shù)據(jù)不是對(duì)象。
  ‘[1,2,3,4]’
  2.數(shù)組的存儲(chǔ)數(shù)據(jù)為對(duì)象
  ‘[{“name”:“亞索”,“age”:“28”,“skill”:“狂風(fēng)絕息斬”},{“name”:“劫”,“age”:20,“skill”:“瞬獄影殺陣”}]’

【注】
1、 數(shù)字和布爾值可以不用帶雙引號(hào)。
2、 對(duì)象在轉(zhuǎn)json字符串時(shí)，函數(shù)會(huì)被自動(dòng)過(guò)濾掉。
3、 parse() 這個(gè)方法會(huì)新創(chuàng)建一個(gè)對(duì)象或數(shù)組。
4、 錯(cuò)誤信息（格式）：
VM14:1 Uncaught SyntaxError: Unexpected token 亞 in JSON at position 8

二、示例

1、對(duì)象或數(shù)組轉(zhuǎn)JSON字符串

使用方法：JSON.stringify(數(shù)組或?qū)ο?

一、對(duì)象轉(zhuǎn)JSON字符串 <script>var obj = {name: "亞索",age: "28",skill: "狂風(fēng)絕息斬",fn: function() {console.log("我是函數(shù)");}}var str = JSON.stringify(obj);console.log(str);// 一、對(duì)象轉(zhuǎn)JSON字符串：//輸出結(jié)果： json字符串 '{"name":"亞索","age":"28","skill":"狂風(fēng)絕息斬"}'// 對(duì)象在轉(zhuǎn)json字符串時(shí)，函數(shù)會(huì)被自動(dòng)過(guò)濾掉。 </script> 二、數(shù)組轉(zhuǎn)JSON字符串： <script>// 1、數(shù)組的存儲(chǔ)數(shù)據(jù)不是對(duì)象var array1 = [1, 2, 3, 4];var str1 = JSON.stringify(array1);console.log(str1);// 輸出結(jié)果：json字符串 '[1,2,3,4]'// 2、數(shù)組的存儲(chǔ)數(shù)據(jù)是對(duì)象var array2 = [{name: "亞索",age: "28",skill: "狂風(fēng)絕息斬"}, {name: "劫",age: 20,skill: "瞬獄影殺陣"}]var str2 = JSON.stringify(array2);console.log(str2);// 輸出結(jié)果： [{"name":"亞索","age":"28","skill":"狂風(fēng)絕息斬"},{"name":"劫","age":20,"skill":"瞬獄影殺陣"}]// 二、數(shù)組轉(zhuǎn)字符串：// 1、數(shù)組的存儲(chǔ)數(shù)據(jù)不是對(duì)象// 輸出結(jié)果：json字符串 '[1,2,3,4]'// 2、數(shù)組的存儲(chǔ)數(shù)據(jù)是對(duì)象// 輸出結(jié)果：json字符串 '[{"name":"亞索","age":"28","skill":"狂風(fēng)絕息斬"},{"name":"劫","age":20,"skill":"瞬獄影殺陣"}]'</script>

2、JSON字符串轉(zhuǎn)對(duì)象或數(shù)組

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

一、JSON字符串轉(zhuǎn)對(duì)象： <script>// JSON字符串轉(zhuǎn)對(duì)象：var str = '{"name":"亞索","age":"28","skill":"狂風(fēng)絕息斬"}';var obj = JSON.parse(str);console.log(obj); </script>

輸出結(jié)果：

JSON字符串轉(zhuǎn)數(shù)組： <script>var str = '[1,2,3,4]';var obj = JSON.parse(str);console.log(obj);//輸出結(jié)果： [1, 2, 3, 4]var str2 = '[{"name":"亞索","age":"28","skill":"狂風(fēng)絕息斬"},{"name":"劫","age":20,"skill":"瞬獄影殺陣"}]';var obj2 = JSON.parse(str2);console.log(obj2); </script>

輸出結(jié)果：

三、本地存儲(chǔ)

1、本地存儲(chǔ)與服務(wù)器存儲(chǔ)

• 本地存儲(chǔ)
  1、 不會(huì)對(duì)服務(wù)器造成負(fù)擔(dān)
  2、 提高訪問(wèn)速度
  3、會(huì)占用本地內(nèi)存
  4、重要的信息不安全
  localstorage： h5新增的 IE8以下不兼容 5MB
  sessionstorage： 5M
  cookie ： 4KB
• 服務(wù)器：
  數(shù)據(jù)庫(kù)

2、localstorage

• 優(yōu)點(diǎn)：
  容量比cookie要大

• 局限：
  有兼容性問(wèn)題
  不會(huì)被爬蟲(chóng)獲取
  本質(zhì)上是對(duì)字符串的讀取操作，比較頻繁，存儲(chǔ)的內(nèi)容比較多，會(huì)導(dǎo)致頁(yè)面卡頓。

• 使用：

1、先考慮兼容性問(wèn)題
if(!window.localStorage){
alert(“該瀏覽器不支持localstorage！”)
return false;
}else{
var storage = window.localStorage;
//業(yè)務(wù)邏輯
}

2、寫(xiě)入：將數(shù)據(jù)存儲(chǔ)到localstorage
三種寫(xiě)法：
key、 value
storage[“name”] = “yasuo”;
storage.setItem(“name”,“sss”)
storage.age = 18;

3、讀取
storage[“鍵”];
storage.getItem(“鍵”)
storage.鍵;

4、刪除
storage.removeItem(“age”);

5、修改：
用同一個(gè)鍵去賦不同的值就是修改

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、將對(duì)象轉(zhuǎn)換成JSON字符串存儲(chǔ)到localstorage中，再讀取出來(lái)，轉(zhuǎn)換成對(duì)象。
看下面代碼示例。

【注意】
1、 localstorage只能存儲(chǔ)字符串,如果將對(duì)象或者數(shù)組放入，取出來(lái)時(shí)是string類(lèi)的數(shù)據(jù)。
2、如果要存儲(chǔ)對(duì)象或數(shù)組，則先將對(duì)象或者數(shù)組轉(zhuǎn)為json的字符串，然后再存儲(chǔ)，需要時(shí)，取出并將其轉(zhuǎn)為對(duì)象或數(shù)組使用。
3、 存儲(chǔ)時(shí)間：永久存儲(chǔ)的
4、 同源性：不同的域名下存儲(chǔ)的數(shù)據(jù)是不共通的。

<script>// console.log(window.localStorage);// 1、先考慮兼容性問(wèn)題if (!window.localStorage) {alert("該瀏覽器不支持localstorage！")} else {// 業(yè)務(wù)邏輯var storage = window.localStorage;// 2、寫(xiě)入：方式三種// 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、修改:用同一個(gè)鍵去賦不同的值就是修改// storage["name"] = "張三";// 6、清除全部:直接調(diào)用該方法// storage.clear();// 7、獲取所有的鍵值// storage.name = "yasuo";// storage.age = 18;// storage.skill = "疾風(fēng)";// 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、將對(duì)象轉(zhuǎn)換成JSON字符串存儲(chǔ)到localstorage中，在讀取出來(lái)，轉(zhuǎn)換成對(duì)象。//1.對(duì)象 var obj = {name: "yasuo",age: "18",}// 2.將對(duì)象轉(zhuǎn)成JSON字符串var objStr = JSON.stringify(obj);// 3.將JSON字符串?dāng)?shù)據(jù)寫(xiě)入localstoragestorage.setItem("obj", objStr);// 4.讀取JSON字符串var str = storage.getItem("obj");// 5.將JSON字符串轉(zhuǎn)成對(duì)象var obj2 = JSON.parse(str);// 6.對(duì)象obj2不同于obj。（存儲(chǔ)地址不是一個(gè)）console.log(obj2);console.log(obj);}</script>

（輸出結(jié)果）：7、獲取所有的鍵值。

3、sessionstorage

語(yǔ)法與localstorage一樣。
把localStorage換成sessionStorage。

<script>if (!window.sessionStorage) {alert("該瀏覽器不支持sessionStorage！")} else {// 業(yè)務(wù)邏輯var session = window.sessionStorage;//寫(xiě)入：// 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共同點(diǎn)：
  1、都是將數(shù)據(jù)存儲(chǔ)在本地中。
  2、只能存儲(chǔ)字符串。

• 區(qū)別：
  localstorage 永久存儲(chǔ)的 除非手動(dòng)刪除。
  sessionstorage 會(huì)話緩存， 會(huì)話結(jié)束時(shí)失效。
  會(huì)話結(jié)束：
  1.代碼控制結(jié)束
  2.瀏覽器關(guān)閉/窗口關(guān)閉

4、cookie

1、cookie介紹

cookie:
用來(lái)存儲(chǔ)瀏覽器端的本地?cái)?shù)據(jù)

• 特點(diǎn)：
  1.按照域名來(lái)存儲(chǔ)的
  不同的域名下的cookie數(shù)據(jù)不共通。
  2.有存儲(chǔ)的路徑
  127.0.0.1:8080/a/b.html cookie /a/b /
  127.0.0.1:8080/b/b.html cookie /b/b
  3.cookie 存儲(chǔ)的數(shù)據(jù)格式
  “鍵1=值1;鍵2=值2”
  4.存儲(chǔ)大小
  4KB 50條左右
  5.時(shí)效性：
  默認(rèn)是會(huì)話級(jí)別
  我們可以手動(dòng)設(shè)置cookie的過(guò)期時(shí)間
  6.操作權(quán)限
  前端可以操作
  后端可以操作
  7.發(fā)送請(qǐng)求時(shí)，cookie中的數(shù)據(jù)會(huì)被自動(dòng)傳輸?shù)胶蠖?br /> 8.cookie只能在域名環(huán)境下才可以使用

2、cookie的使用方法

1、 增 （寫(xiě)入）
document.cookie = “鍵=值”;
【注】 增加時(shí)一次只能增加一條
2、 查（讀取）
document.cookie
【注】 一次時(shí)獲取cookie中的所有內(nèi)容
3、 改
同一域名下
document.cookie = “鍵=新值”;
4、 刪
沒(méi)有刪除方法，有過(guò)期時(shí)間
如果要?jiǎng)h除，則將該數(shù)據(jù)的有效期設(shè)置為過(guò)期即可。
5、 有效期設(shè)置：(用于設(shè)定時(shí)間，刪除該記錄)
document.cookie = “鍵=值;expires=”+日期;
服務(wù)器的時(shí)間以格林威治事件為準(zhǔn)的。

<script>// 寫(xiě)入(一次只能寫(xiě)入一條)document.cookie = "name=張三";document.cookie = "BD_UPN=123";// 讀取(一次性獲取cookie中的所有內(nèi)容)// document.cookie;console.log(document.cookie);// 改(同一域名下)// document.cookie = "鍵=新值"// 有效期設(shè)置(用于設(shè)定時(shí)間，刪除該記錄)// document.cookie="鍵=值;expires="+ 日期document.cookie = "BD_UPN=123;expires=" + new Date("2021/01/20 06:46:50");</script>

有效期設(shè)置(用于設(shè)定時(shí)間，刪除該記錄)后：會(huì)刪除該記錄

• 解析cookie中的數(shù)據(jù)：

<script>document.cookie = "name=yasuo";document.cookie = "username=18";console.log(document.cookie);var arr1 = document.cookie.split(";");console.log(arr1);// 解析：cookie中的數(shù)據(jù)。// 方法一：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封裝函數(shù)

<title>Document</title><!-- 設(shè)置cookiename valueexpires --><script>/*** name 鍵value 值expires 過(guò)期時(shí)間 單位：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） 查找字符串，獲取下標(biāo)// start 表示開(kāi)始截取的位置（下標(biāo)，索引） end表示截取的位置（下標(biāo)） // substring(start,end) 截取字符串 setCookie("name", "yasuo");// setCookie("username", "18");console.log(getCookie("name"));</script>

5、知識(shí)點(diǎn)

indexof（字符串,start） 查找字符串，獲取下標(biāo)
start 表示開(kāi)始截取的位置（下標(biāo)，索引） end表示截取的位置（下標(biāo)）。
substring(start,end) 截取字符串

6、案例：足跡

（1）.進(jìn)入頁(yè)面 先判斷cookie中有沒(méi)有足跡信息
1.1 有 取出 遍歷之后放入到footprint中
1.2 沒(méi)有 就沒(méi)有了唄

（2）.在點(diǎn)擊li時(shí)，產(chǎn)生一條歷史訪問(wèn)記錄
2.1 將這條記錄放入到cookie中， 數(shù)組[] 轉(zhuǎn)json字符串 放入到cookie
2.2 放入時(shí)應(yīng)該判斷是否存在 是的話，將原來(lái)的刪除，新的放入 沒(méi)有的話，直接放入
2.3 歷史記錄是有長(zhǎng)度顯示的。 最多只能存放三條，當(dāng)你放入第四條的時(shí)候，應(yīng)該刪除第一條。

7、模板字符串

• 模板字符串
  ES6之前，拼接字符串使用 +
  ES6之后，一種新的字符串定義方式。 ``(反引號(hào)) 英文狀態(tài)下，tab上方那個(gè)鍵位 ‘’

• 區(qū)別：
  1.普通字符串 不可以換行的 模板字符串可以換行，且輸出時(shí)，換行仍有效。
  2.單引號(hào)與雙引號(hào)不能在字符串中解析變量。
  模板字符串可以解析**${ }**中的變量。
  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}萬(wàn)人好評(píng)</div></a><div class="recommend-action"><a href="javascript:void(0);"class="btn btn-small btn-line-primary" data-index="${index}">加入購(gòu)物車(chē)</a></div><div class="recommend-notice"><a class="btn btn-block btn-green btn-notice">成功加入購(gòu)物車(chē)</a></div></li>`recList.innerHTML += str;});

8、模板引擎

artTemplate
1.引入template的js
2.創(chuàng)建一個(gè)Script標(biāo)簽
2.1 id 隨便起
2.2 type = text/html
3.使用template方法 第一個(gè)參數(shù)為2.1的ID 第二個(gè)參數(shù)為一個(gè)對(duì)象
4.循環(huán) {{each arr item index}} {{/each}}
each 關(guān)鍵字
arr 循環(huán)數(shù)組
item 表示每次循環(huán)中的元素
index 表示每次循環(huán)元素的下標(biāo)索引
{{變量}} 可以在頁(yè)面中輸出變量 也可以書(shū)寫(xiě)一些簡(jiǎn)單的表達(dá)式
5.if判斷
格式：
{ {if 邏輯表達(dá)式 } }
表達(dá)式成立時(shí)執(zhí)行的內(nèi)容
{ {else} }
表達(dá)式不成立時(shí)執(zhí)行的內(nèi)容
{ {/if} }

<div id="box"><script id="test" type="text/html">{{age}}<ul>{{each arr item index}}<li>第{{index+1}}項(xiàng)----{{item}}</li>{{/each}}</ul>{{if flag}}大于18歲的才可以看到這些內(nèi)容！ {{else}}未滿18歲的請(qǐng)?jiān)诩议L(zhǎng)陪同下觀看{{/if}}</script></div>

總結(jié)

以上是生活随笔為你收集整理的（31）2021-01-20（JSON字符串和本地存储）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。