本文介绍了JSON字符串的格式和在网络传输中的作用，详细讲解了JavaScript中JSON.parse()和JSON.stringify()的使用。接着讨论了localStorage和sessionStorage的本地存储特性，包括它们的区别、存储限制及操作方法。最后，探讨了Cookie的存储方式、特点、限制和操作，以及如何进行过期时间设置，并提供了一个简单的cookie封装函数示例。
josn字符串
json字符串
json格式的字符串
“abc123truelkgsjhgo” 普通字符串
“< h1>hgahgo< /h1>” html格式字符串
键值对格式 键和值都需要用双引号去包括 ‘“name”:“yasuo”’
json用途：
在网络传输时使用。 比如前后端交互。
不能够传输对象和数组的。
只能通过字符串形式去传输数据。
所以说我们如果要传输对象和数组，我们需要将其转换为字符串。
json格式就是满足对象和数组数据结构的一种字符串
json的使用方法：
- JSON.parse()
把json格式的字符串转为js中的数组或对象
parse() 这个方法会新创建一个对象或数组 - json.stringify()
把js中的数组或对象转为json字符串
对象： ‘{“属性名”:“属性值”,“属性名2”:“属性值2”,“属性名3”:“属性值3”}’
数组：
1.存储数组不是对象。
‘[1,2,3,4]’
2.存储数组为对象
‘[{“name”:“亚索”,“age”:“28”,“skill”:“狂风绝息斩”},{“name”:“劫”,“age”:20,“skill”:“瞬狱影杀阵”}]’
数字和布尔值可以不用带双引号
对象在转json字符串时，函数会被自动过滤掉。
示例：
<script>
var obj = {
name: "亚索",
age: "28",
skll: "哈撒给"
}
// 对象转成字符串
var str = JSON.stringify(obj);
console.log(str);
console.log(typeof str);
</script>
<script>
// 数组转成字符串
var arr = [1, 1, 5, 4, 7];
var str = JSON.stringify(arr);
console.log(str);
console.log(typeof str);
// 生成新数组
var arr2 = JSON.parse(str);
console.log(arr2);
console.log(typeof arr2);
</script>
<script>
// 生成新的对象
var str = '{"name":"提莫","join":"提莫队长正在送命"}'
var obj = JSON.parse(str);
console.log(obj);
</script>
localstorage本地存储
本地：
不会对服务器造成负担
提高访问速度
会占用本地内存
localstorage h5新增的 IE8以下不兼容 5MB
sessionstorage 5M
共同点：
都是将数据存储在本地中
只能存储字符串
区别：
localstorage 永久存储的 除非手动删除
sessionstorage 会话缓存
会话结束时失效
1.代码控制结束
2.浏览器关闭/窗口关闭
使用：
- 先考虑兼容性问题
if(!window.localStorage){
alert(“该浏览器不支持localstorage！”)
return false;
}else{
//业务逻辑
} - 将数组存储到localstorage
三种写法：
key value
storage[“name”] = “yasuo”;
storage.setItem(“name”,“sss”)
storage.age = 18; - 读取
storage[“键”];
storage.getItem(“键”)
storage.键; - 删除
storage.removeItem(“age”); - 修改：
用同一个键去赋不同的值就是修改 - 清除全部
storage.clear(); - 获取所有的键值
for (var i = 0; i < storage.length; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
}
【注意】 localstorage只能存储字符串,如果将对象或者数组放入，取出来时是string类的数据。
如果要存储对象或数组，则先将对象或者数组转为json的字符串，然后再存储，需要时，取出并将其转为对象或数组使用、。
存储事件：永久存储的
同源性：
不同的域名下存储的数据是不共同的
示例
<script>
console.log(window.localStorage);
var storage = window.localStorage;
// 将数组存储到localstorage的三种写法
storage["name"] = "yasuo";
storage.setItem("nam", "sss");
storage.age = 18;
// 读取
console.log(storage["name"]);
console.log(storage.getItem("age"));
console.log(storage.name);
</script>
<script>
console.log(window.localStorage);
var storage = window.localStorage;
// 将数组存储到localstorage的三种写法
storage["name"] = "yasuo";
storage.setItem("nam", "sss");
storage.age = 18;
// 读取
console.log(storage["name"]);
console.log(storage.getItem("age"));
console.log(storage.name);
// 删除名字
storage.removeItem("name");
storage.removeItem("nam");
</script>
<script>
console.log(window.localStorage);
var storage = window.localStorage;
// 将数组存储到localstorage的三种写法
storage["name"] = "yasuo";
storage.setItem("nam", "sss");
storage.age = 18;
// 读取
console.log(storage["name"]);
console.log(storage.getItem("age"));
console.log(storage.name);
// 修改，用同一个键去赋不同的值
storage.name = "timo";
</script>
获取所有值
<script>
console.log(window.localStorage);
var storage = window.localStorage;
// 将数组存储到localstorage的三种写法
storage["name"] = "yasuo";
storage.setItem("nam", "sss");
storage.age = 18;
// 读取
console.log(storage["name"]);
console.log(storage.getItem("age"));
console.log(storage.name);
// 获取所有的值
for (var i = 0; i < storage.length; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
console.log("key=" + key + ",value=" + value);
}
</script>
删除全部
<script>
console.log(window.localStorage);
var storage = window.localStorage;
// 将数组存储到localstorage的三种写法
storage["name"] = "yasuo";
storage.setItem("nam", "sss");
storage.age = 18;
// 读取
console.log(storage["name"]);
console.log(storage.getItem("age"));
console.log(storage.name);
// 获取所有的值
for (var i = 0; i < storage.length; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
console.log("key=" + key + ",value=" + value);
}
// 存储事件：永久存储的
// 删除全部
storage.clear()
</script>
sessionstorage 会话缓存
<script>
var session = window.sessionStorage;
session.setItem("name", "yaso")
session.setItem("age", "18")
session.setItem("skill", "hasaki")
console.log(session.getItem("name"));
</script>
<script>
var session = window.sessionStorage;
session.setItem("name", "yaso")
session.setItem("age", "18")
session.setItem("skill", "hasaki")
console.log(session.getItem("name"));
// 删除name
session.removeItem("name")
</script>
.clear()全部清除
cookie储存
cookie:
用来存储浏览器端的本地数据
特点：
- 按照域名来存储的
不同的域名下的cookie数据不共通。 - 有存储的路径
127.0.0.1:8080/a/b.html cookie /a/b /
127.0.0.1:8080/b/b.html cookie /b/b - cookie 存储的数据格式
“键1=值1;键2=值2” - 存储大小
4KB 50条左右 - 时效性：
默认是会话级别
我们可以手动设置cookie的过期时间 - 操作权限
前端可以操作
后端可以操作 - 发送请求时，cookie中的数据会被自动传输到后端
- cookie只能在域名环境下才可以使用
使用方法：
- 增 （写入）
document.cookie = “键=值”;
增加时一次只能增加一条 - 查（读取）
document.cookie
一次时获取cookie中的所有内容 - 改
同一域名下
document.cookie = “键=新值”; - 删
没有删除方法，有过期时间
如果要删除，则将该数据的有效期设置为过期即可。
有效期设置：
document.cookie = “键=值;expires=”+日期;
服务器的时间以格林威治事件为准的，比中国时间快8个小时。
.getTime()转换为中国标准时间
<script>
document.cookie = "name=www.baidu.com;expires=" + new Date("2021/01/27 07:49:00");
// 服务器时间为格林威治时间
document.cookie = "wdsadd=xccxczzxc;";
console.log(document.cookie);
</script>
修改
<script>
document.cookie = "name=www.baidu.com;expires=" + new Date("2021/01/27 07:49:00");
// 服务器时间为格林威治时间
document.cookie = "wdsadd=xccxczzxc;";
// 修改
document.cookie = "name=www.qq.com;";
console.log(document.cookie);
</script>
cookie封装函数
封装函数为三个值
name键 value值 expires过期时间，单位s
<script>
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;
}
}
setCookie("name", "yasuo", "60");
</script>
key键
<script>
// 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", "11111");
setCookie("nam", "222222");
console.log(getCookie("name"));
</script>
key取到所有值
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
