先来总结一下它们的用法
localStorage和sessionstorage都具有相同的操作方法(setItem(),getItem(),removeItem()以及clear())
(1).存储数据(将value存储到key字段上)
实现代码如下:
sessionStorage.setItem("key","value");localStorage.setItem("key","value");
(2).获取数据(获取到指定的key本地存储的值)
实现代码如下:
sessionStorage.getItem("key");localStorage.getItem("key");
(3).删除数据(删除指定key本地存储)
实现代码如下
sessionStorage.removeItem("key");localStrorage.removeItem("key");
(4).清除数据(清除所有本地存储的数据)
实现代码如下:
sessionStorage.clear();localStorage.clear();
cookie的使用方法
存储数据:window.document.cookie='...';
取出数据:document.cookie
三者区别与联系
1.cookie在浏览器和服务器端来回传递数据,而localStorage和sessionStorage不会自动把数据发送给服务器,仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。
2.cookie可以设置过期日期,sessionStorage是会话级的数据,浏览器窗口关闭即清楚,localStorage是永久性的数据,一旦赋值,不管多长时间这值都是存在的,除非手动清除。
3.cookie的存储大小受限制,一般不超过4k,而localStorage和sessionStorage的存储大小一般不超过5M,大大提高了存储的体积。
4.sessionStorage不跨窗口,在另外一个窗口打开sessionStorage就不存在了,它只在当前窗口有效,而cookie和localStorage都是跨窗口的,即使浏览器的窗口关闭,这两个值还是存在的
使用场景
localStorage可以用来统计页面访问次数
sessionStorage可以用来统计当前页面元素的点击次数
cookie一般存储用户名密码相关信息,一般使用escape转义编码后存储