彻底了解localstorage,sessionStotrage,cookie的使用场景和区别

先来总结一下它们的用法

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转义编码后存储