文章目录

一、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和本地存储相关推荐

（31）2021-01-20（JSON字符串和本地存储）
JSON字符串和本地存储一.json字符串二.示例 1.对象或数组转JSON字符串使用方法:JSON.stringify(数组或对象) 2.JSON字符串转对象或数组使用方法:JSON.par ...
基于本地存储LVM新建虚机方案
文章目录基于本地存储LVM新建虚机方案 date: 2021/12/22 auth: mmwei3 一.环境信息如下: 二.需求方案: 1.虚机(卷启动)+系统盘+数据盘三者在同一计算节点. 2. ...
node JS獲取GPS_Node.js 14 正式发布：V8 引擎升级，新增异步本地存储 API
Node.js 14 版本于近日正式发布, 此版本包含的亮点如下: 对诊断功能的改进升级 v8 引擎新增实验性的异步本地存储 API 强化流 API 移除实验性模块中的警告移除一部分早期版本中废 ...
HTML5 本地存储
HTML5 本地存储 1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性参考文献本地持久化存储一直是本 ...
html5储存类型,html5本地存储-留言板
HTML5每日一练之JS API-本地存储LocalStorage 留言板 | 前端开发网(W3Cfuns.com)! var Storage = { saveData:function()//保存数 ...
JavaScript本地存储实践（html5的localStorage和ie的userData）的实例页面
本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Op ...
linux追加SQL结果到文件,RAC环境下误操作将数据文件添加到本地存储
今天碰到个有意思的事情,有客户在Oracle RAC环境,误操作将新增的数据文件直接创建到了其中一个节点的本地存储上.发现网上去搜的话这种问题还真不少,对应解决方案也各式各样,客户问我选择哪种方案可行 ...
基于超大规模集群的本地存储系统优化
关注获得更多内容精彩预告:第八届数据技术嘉年华大会将于2018年11月16日~17日在北京市朝阳区东三环中路61号富力万丽酒店盛大开启.本次大会邀请互联网领先企业的数据库专家,国产数据库的领军人物, ...
HTML5本地存储详解
HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取.这个概念和cookie相似,区别是它是为了更大容量存储设计的. HTML5storage提供 ...

2021-01-20JSON和本地存储