JSON字符串、存储方式

您所在的位置：网站首页 › 用string变量存放字符串 › JSON字符串、存储方式

JSON字符串、存储方式

2024-07-17 13:21| 来源: 网络整理| 查看: 265

json 用途使用方法本地存储localstorage|sessionstorage获取所有键或值 cookie封装写入键值对封装获取键或值获取指定键的值 json字符串 json格式的字符串 “abc123truelkgsjhgo” 普通字符串 “ hgahgo” html格式字符串键值对格式键和值都需要用双引号去包括 ‘“name”:“yasuo”’

用途

在网络传输时使用。比如前后端交互。不能够传输对象和数组的。只能通过字符串形式去传输数据。

所以说我们如果要传输对象和数组，我们需要将其转换为字符串。 json格式就是满足对象和数组数据结构的一种字符串

使用方法

JSON.parse() 把json格式的字符串转为js中的数组或对象

json.stringify() 把js中的数组或对象转为json字符串

对象转为json字符串后的格式： ‘{“属性名”:“属性值”,“属性名2”:“属性值2”,“属性名3”:“属性值3”}’

var str = { name: "张三", age: 18, hobby: "乒乓球", fun: function() { console.log("猜猜我是谁"); } } // 对象转json字符串 JSON.stringify() var test = JSON.stringify(str); console.log(test); // json字符串转对象 JSON.parse() var test1 = JSON.parse(test); console.log(test1);

在这里插入图片描述

数组： 1.存储数组不是对象。 ‘[1,2,3,4]’ 2.存储数组为对象 ‘[{“name”:“亚索”,“age”:“28”,“skill”:“狂风绝息斩”},{“name”:“劫”,“age”:20,“skill”:“瞬狱影杀阵”}]’

在这里插入图片描述

数字和布尔值可以不用带双引号

对象在转json字符串时，函数会被自动过滤掉。

parse() 这个方法会新创建一个对象或数组

错误信息： VM14:1 Uncaught SyntaxError: Unexpected token 亚 in JSON at position 8

本地存储不会对服务器造成负担提高访问速度会占用本地内存重要的信息不安全

localstorage h5新增的 IE8以下不兼容 5MB sessionstorage 5M cookie 4KB

服务器：

数据库

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

localstorage|sessionstorage

localstorage与sessionstorage的基本操作大致相同，这里只写一个，另一个参考这些就可以使用： 1.先考虑兼容性问题

if(!window.localStorage){ alert("该浏览器不支持localstorage！") return false; }else{ //业务逻辑 }

2.将数组存储到localstorage 三种写法：

key value storage["name"] = "yasuo"; storage.setItem("name","sss") storage.age = 18;

3.读取

storage["键"]; storage.getItem("键") storage.键;

2.3例子

var str = window.localStorage; // 存储键值对 str["name"] = "张三"; str.setItem("name1", "李四"); str.name2 = "王五"; // 获取值 console.log(str["name"]); console.log(str.name); console.log(str.getItem("name"));

在这里插入图片描述

4.删除 storage.removeItem(“age”);

str.removeItem("name2");

在这里插入图片描述

5.修改：用同一个键去赋不同的值就是修改

str["name"] = "阿拉蕾";

在这里插入图片描述

6.清除全部 storage.clear(); 7.获取所有的键值【注】获取所有值(获取值时有两种方法变量1.变量.getItem(“键”)、变量[“键”],不能使用变量.键的方式，因为在获取键的时候，返回的就是一个字符串形式"键")

for (var i = 0; i var key = str.key(i); var keyValue = str[key]; console.log(key); console.log(keyValue); } 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只能在域名环境下才可以使用

使用方法：增（写入） document.cookie = “键=值”; 增加时一次只能增加一条

document.cookie = "name=张三; name1=王五"; document.cookie = "name1=lisi;"; document.cookie = "age=2;";

在这里插入图片描述

查（读取） document.cookie 一次时获取cookie中的所有内容改同一域名下 document.cookie = “键=新值”; 删没有删除方法，有过期时间如果要删除，则将该数据的有效期设置为过期即可。

有效期设置：

document.cookie = “键=值;expires=”+日期;

服务器的时间以格林威治事件为准的

封装写入键值对 function setCookie(name, value, exp) { var date = new Date(); // 是否有过期时间 if (exp == "") { document.cookie = name + "=" + value; } else { date.setHours(date.getHours() - 8); // 过期时间为当前时间后exp秒 date.setTime(date.getTime() + 1000 * exp); document.cookie = name + "=" + value + ";expires =" + date; } } setCookie("hobby", "乒乓球", 20);

【注】此验证需要这样操作：封装完函数后，调用。打开网页上观察验证，需要先返回代码编辑的地方，将用函数代码注释或删除，在返回感觉网页，等到时间过期之后再刷新页面，时间过期的键值对就会消失，删除掉了

封装获取键或值 function getCookie() { // 是否有键值对 if (document.cookie.length > 0) { var arr = document.cookie.split(";"); for (var i = 0; i // 是否有键值对 if (document.cookie.length > 0) { var start = document.cookie.indexOf(key + "="); console.log(document.cookie); console.log(start); if (start != -1) { var end = document.cookie.indexOf(";", start); // 只有一对键值 if (end == -1) { end = document.cookie.length; } console.log(document.cookie.substring(start + key.length + 1, end)); } } } getCookie("name");

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章