文章目錄

• 一、json字符串
• 二、示例
• • 1、對象或數組轉JSON字符串
  • 2、JSON字符串轉對象或數組
• 三、本地存儲
• • 1、本地存儲與服務器存儲
  • • 4、cookie

一、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"));//yasuo//刪除：// session.removeItem("name")//清除全部：// session.clear();}</script>

• localstorage與sessionStorage共同點：
  1、都是將數據存儲在本地中。
  2、只能存儲字符串。

• 區別：
  localstorage 永久存儲的 除非手動刪除。
  sessionstorage 會話緩存， 會話結束時失效。
  會話結束：
  1.代碼控制結束
  2.瀏覽器關閉/窗口關閉

4、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只能在域名環境下才可以使用
• 使用方法：
  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>

• 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.setHours(exDate.getHours() - 8);exDate.setTime(exDate.getTime() + 1000 * expires);document.cookie = name + "=" + value + ";expires =" + exDate;}}// 方法一：// 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>

總結

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

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