说到存储,历久弥新,到现在存留下来并被广泛运用的已经所剩无几了,今天我们就来说说Cookie浏览器存储的localStorage本地存储。
注意:查看本地存储需要在服务器环境下,不要忘了开启XAMPP服务器环境哦!!!
1、Cookie
(1)Cookie是最早的一个存储工具,它的特性是依附于浏览器;且内存较小,只有约4k的大小(大概英文字母可存4000多个,汉字可存2000多个),只能用来存储一些密码啊、用户名啊什么的。当然了能一直沿用至今,就说明了人家有别人替代不了的优点,那就是任何浏览器都支持。咳咳~我们cookie小伙伴还是很友好的嘛。O(∩_∩)O~
(2)cookie的设置
cookie存储的用法:
document.cookie = “键=值”;
所以要想存一个东西在浏览器的话,就直接写这句话在script标签内就可以了
例如:
document.cookie = "name=码丫头萍子";
查看cookie的位置在浏览器的链接栏前面的那个小圆圈倒感叹号那里。
如上,我存了一个name在cookie里,效果图如下(我这边使用的是Chrome浏览器):
如图所示,选中的那个name就是我刚存进去的。
ok,注意点来了哦,注意注意,大家有没有发现上图中有一个“过期时间”啊,它显示的是浏览会话结束时就过期了,所以cookie能留到现在,它势必会有一个设置过期时间的方法,要不然存了就过期谁还用它啊,对不对。
下面我们就来说说cookie设置保存时间的方法:
这里需要用到JS的日期对象,我们稍微介绍了一点。
var date = new Date();
date.setDate(date.getDate()+3);
//有了时间设置的cookie语法
document.cookie = "name=码丫头萍子;expires="+date;
以上设置的意思就是这个数据会在三天后过期,也就试试说这个数据会在浏览器上保存三天。
效果图如下:
ok,那细心的小伙伴一定会发现,图片上的过期时间是不对的吧,掐指一算是不是多了8个小时啊,哈哈,别紧张,我们的设置是没错的,只不过它这个时间是按照本初子午线,也就是0时区算的时间,而我们中国处于东八区,所以会有8的小时的时间差,我们只要再加上一个统一时间的API就可以了
document.cookie = "name=码丫头萍子;expires="+date.toUTCString();
效果图如下:
哈哈哈,到这里cookie的设置就完美了。接下来我们说一下该怎么获取到我们自己存储的数值。
(3)获取cookie的值
最简单的我们先来打印一下:
console.log(document.cookie);
打印结果:
哈哈,我又偷偷的添加了两条暴露信息的存储内容,嘘嘘嘘~
正如大家看到的,打印出来的是一个字符串,所以首先我们要先处理一下,因为我们获取的话,肯定是获取的某个准确信息对吗,比如获取name,这个时候就需要取出来对应的值。
处理的过程就是运用字符串和数组的方法对齐进行转化,取值,不做详细赘述,看不明白的可以问我,码丫头一直在哦~
代码如下(这里已封装成函数,设值cookie存储的部分也可以写成函数,小伙伴们可以试试):
function getCookie(key){
var arr = document.cookie.split("; ");
for(index in arr){
var res = arr[index].split("=");
if(res[0] == key){
return res[1];
}
}
}
```
比如我们需要取name的值,就直接调用函数就可以了
console.log(getCookie(“name”));//码丫头萍子
酱紫,到这里cookie的获取也讲完了。
(4)删除存储
那小伙伴们说了,如果要删除那该咋办呢。还记得我们设置的时候有一个时间设置不?延迟过期时间可以设置成正数,那已经过期的不就是不存储的了吗,对不对,所以只需在设置时间的时候,给一个负值就好了,哈哈哈~
var date = new Date();
date.setDate(date.getDate()-1);
//有了时间设置的cookie语法
document.cookie=”name=码丫头萍子;expires=”+date.toUTCString();
“`
(5)cookie到这里就说完了。。。。。。
2、localStorage本地存储
localStorage的使用就简单多了,没有那么多的弯弯绕绕。
唯一需要注意的就是在使用的时候,需要看看当前浏览器是否支持localStorage就可以了。
设置存储的三种方式:
localStorage.name = 码丫头萍子;//设置name为“码丫头萍子”
localStorage[“name”] = “码丫头萍子”;//设置name为”码丫头萍子“,覆盖上面的值
localStorage.setItem(“name”,”码丫头萍子”);//设置b为”码丫头萍子”
获取存储的三种方式:
var a1 = localStorage[“name”];//获取a的值
var a2 = localStorage.name;//获取a的值
var b = localStorage.getItem(“name”);//获取b的值
同样的它也有删除存储的方式,也就只有一句话:
localStorage.removeItem(“name”);//清除name的值
本地存储在浏览器上的查看位置和cookie一样,具体如下图:
3、Cookie和localStorage的区别
(1)cookie依赖于服务器环境,且是存在浏览器的;localString是本地存储。
(2)cookie的内存只有4k,localStorage的内存达到了5M。
(3)cookie有过期期限,如果不设置过期时间是马上就过期的;localStorage的存储是永久性的。
好了,今天就说到这里,小伙伴们去吃饭饭吧,萍子也要进食了,吧唧吧唧~~~