web存储与cookie的区别

前端在处理页面数据的时候会存放一些数据在浏览器当中，一般存储在浏览器当中的缓存数据安全

性比较低

1.Cookie

cookie存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie,
一般情况下，cookie是产生于服务器端，保存于客户端，但是我们也可以通过js来产生cookie；
通常通过js-cookie这个库来操作cookie
只针对于服务器,同一个服务器可以共享cookie。

存储少量数据，每个cookie大小在 4kb左右

    // 创建cookie
    Cookies.set('data','this is cookie',{expires:7});
    //获取cookie
    var r = Cookies.get('data');
    console.log(r);
    //移除cookie
    Cookies.remove('data');

2.sessionStorage 会话存储 选项卡

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
关闭对应浏览器tab，会清除对应的sessionStorage。

// 设置内容
sessionStorage.setItem('name','terry');
// 获取内容
console.log(sessionStorage.getItem('name'));
// 清空内容的属性值
// sessionStorage.clear();
// 清空内容
 sessionStorage.removeItem('name');

3.localStorage本地存储

localStorage 本地存储 存到本地磁盘中，即使浏览器关闭数据依然在。

// 设置内容
localStorage.setItem('name','larry');
// 获取内容
console.log(localStorage.getItem('name'));
// 清空内容
localStorage.clear();
// 清空内容
localStorage.removeItem('name');