localStorage、sessionStorage 和 Cookie 区别及用法

·  阅读 1084

会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。

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

一、区别

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

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

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

特性CookieLocalStoragesessionStorsge
数据的生命周期一般由服务器生成,可设置时间,如果在浏览器生成,默认是关闭浏览器之后失效除非被清除,否则永久保存仅在当前会话有效,关闭页面或浏览器后呗清除
存放数据大小4KB一般5MB一般5MB
与服务端通信每次都会携带HTTP头中,如果使用cookie保存过多数据会带来性能问题仅在客户端保存,不参与和服务器的通信同LocalStorage
用途一般由服务器端生成,用于表示用户身份用于浏览器端缓存数据同LocalStorage

二、建议

由于 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: falseraw: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();
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改