会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。

Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

一、区别

1. localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失

2. sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的

3. cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取

二、建议

由于 vue 是单页面应用，操作都是在一个页面跳转路由，因此 sessionStorage 较为合适

原因:

• sessionStorage 可以保证打开页面时 sessionStorage 的数据为空
• 每次打开页面 localStorage 存储着上一次打开页面的数据，因此需要清空之前的数据

三、cookie和session的区别

1、cookie数据存放在客户的浏览器上，session数据放在服务器上。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session。

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用COOKIE。

4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。 知道这些区别了后，还要得知道他们的用法：

1.cookie的用法

创建一个会话cookie

//当没有明确cookie时，所创建的cookie有效期默认到用户浏览器关闭，所以称为会话cookie
$.cookie('cookieName','cookieValue')
复制代码

创建一个持久cookie：

//当指明时间,称为持久cookie,并且有效时间为7天
$.cookie(‘cookieName’,'cookieValue’，｛expires：7｝);
复制代码

创建一个持久并带有效路径cookie：

//如果不设置有效路径在默认星狂下，只能在cookie设置当前页面读取cookie，cookie路径用于设置能够读取cookie的顶级项目
$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'｝);
复制代码

创建一个持久并带有效路径和域名的cookie： 注意：domain：创建网页拥有的域名；secure：默认是false，如果为true,传输协议需为https；raw：默认为false，读取和写入时候自动进行编码和解码

$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'，domain: ‘chuhoo.com’，secure: false，raw:false｝);
复制代码

读取cookie：

// cookie存在 => 'the_value' 
$.cookie('the_cookie'); 
// cookie不存在 => null 
$.cookie('not_existing'); 
复制代码

删除cookie：

//删除cookie，通过传递null作为cookie的值即可
$.cookie('the_cookie', null);
复制代码

存储数据：

window.document.cookie = 'key=val';
复制代码

取出数据：

document.cookie
复制代码

localStorage和sessionStorage的用法：

//首先要判断浏览器是否支持localStorage和sessionStorage
if (window.localStorage) {
    alert('浏览支持 localStorage');
} else {
    alert('浏览暂不支持 localStorage');
}
复制代码

存储数据：

//用途：将value存储到key字段
sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');
复制代码

读取数据：

//获取指定key本地存储的值
sessionStorage.getItem('key');
localStorage.getItem('key');
复制代码

删除数据：

//删除指定key本地存储的值
sessionStorage.removeItem('key');
localStorage.removeItem('key');
复制代码

清除数据：

//清除所有本地存储的数据
sessionStorage.clear();
localStorage.clear();
复制代码