[深圳|结业弟子]JS-彭士兴|2019年07月06日的日报-技能树.IT修真院

发表于： 2019-07-06 21:26:10

2 941

今日完成：

1 将js任务三中的页面存储及调用完成

2 了解并使用了数组，并使用了乱序

今日收获：

1 了解并使用了数据存储，并知晓了一些页面存储相对于cookie的优劣

localStorage 的优势

1、localStorage 拓展了 cookie 的 4K 限制。
2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。

localStorage 的局限

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

参考文档：

https://www.runoob.com/jsref/prop-win-localstorage.html

2 了解洗牌原理，本质就是声明一个数组，然后随机打乱

var arr = [1,2,6,12,45,121,9];
arr.sort(function() {
    return (0.5-Math.random());
})
console.log(arr);

浏览器输出：

参考文档：

https://blog.csdn.net/weixin_41475854/article/details/80462484

3 虽然页面存储有着诸多好处，但是，storage只能存储字符串的数据，对于JS中常用的数组或对象却不能直接存储。

var obj = { name:'Jim' };

sessionStorage.obj = obj;

localStorage.obj = obj;

var arr = [1,2,3];

sessionStorage.obj = arr;

localStorage.obj = arr;

上面的写法都是不能成功的！但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串，再存储到storage中就可以了。请看下面的代码。

var obj = { name:'Jim' };

var str = JSON.stringify(obj);

//存入

sessionStorage.obj = str;

//读取

str = sessionStorage.obj;

//重新转换为对象

obj = JSON.parse(str);

localStorage也一样，只是和sessionStorage的存储时间不一样。

需要注意的是，JS中的数组本质上也是对象类型，所以上面的代码对数组也是适用的。

参考文档：

https://www.cnblogs.com/ranyonsue/p/6402687.html

明日计划：将任务三进行最后的调试，检查并处理bug

返回列表