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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。