记得在牛客网里看到过一道题,谈一谈对cookies、localStorage、sessionStorage的区别?
在这里我们就来谈一谈这三种存储方式的区别与优缺点。
一、Cookies
首先呢,我们来谈一谈这里面比较老的一个概念cookie,其实在做网络请求或者是ajax的时候大家都会发现,我们发送请求的时候是会把cookie一起发送的,这就是cookie最初的用处,是用来做Client客户端与server服务器的通信的,那么有人可能就会疑惑了,那为啥会把它归为存储一类,其实是因为cookie具有本地存储的功能,所以说我们借用了它的这种能力去实现某些功能。
那么,它作为存储缺点在哪儿呢?谈的最多的一个问题就是存储量非常的小,4KB,而且我们可以看到每次的http请求都会将所有的cookie带着发送,这会影响我们请求的效率,再其次我们要设置cookie也比较麻烦,用起来很不舒服。
二、localStorage和sessionStorage
这是H5提出的两个用于存储的两个标准,最大的存储是5M,同时呢,存储的API比较简单,没有那么繁琐。
1 // 存
2 localStorage.setItem(key, value);
3 // 取
4 localStorage.getItem(key);
我们可能会想为什么cookie只能4k,而这俩可以做到5M呢,大家可以想一想,如果要是cookie能有5M会出现什么情况,每次发送请求都要带上5M的cookie,那就很恐怖了,所以后面这个能做到5M因为在发送请求的时候不用带上。
那么他们俩有什么区别呢,当然有,从名字上看,一个local一个session,大家都知道session是什么,会话的意思,所以sessionStorage在会话结束的时候就会清理掉,而local你不主动去清理的话它会一直存在。当然了我们用的比较多的还是localStorage。大家可以看一看淘宝的页面中的使用情况。
可以看到淘宝在localStorage里存储了图片的数据等,我们在工作中使用到localStorage还是比较多的。
三、总结
现在总结一下,这三个的区别,首先呢,最明显的区别就是存储的容量,cookie非常小,而后两个要大。其次,cookie要跟随着请求走,而后两个不会,最后相对的来说,后两种的API更加的简单,cookies相对要麻烦一点。所以在使用的时候,对于存储的数据我们是用localStorage,对于要进行交互的数据放在cookie中,而sessionStorage存储的是会话级的数据。