当前位置: 代码迷 >> 综合 >> sessionStorage localStorage, session ,cookie,token的理解
  详细解决方案

sessionStorage localStorage, session ,cookie,token的理解

热度:13   发布时间:2023-12-03 05:29:13.0

一.sessionStorage localStorage,cookie

 (1) javaScrpit是三种存储的方式,

 (2)相同点:都保存在浏览器端

 (3)不同点:

   1.传递方式不同

   cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递

   2.数据大小不同

    存储大小不同限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以   

    cookie只适合保存很小的数据,如会话标识。

    sessionStorage和loaclStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或者更      大。

  3.数据有效期不同

    sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持

    localStorage:始终有效,浏览器关闭也一直保存,因此用作持久数据

    cookie:只在设置cookie过期时间前一直有效,即使浏览器关闭也不会造成影响

 二.session

1.session是另一种记录服务器和客户端会话状态的机制

2.session是基于cookie是实现的,session存储在服务器端,session会被存储到客户端的cookie中

     举个例子来说:

    cookie和session都是由服务器生成的,

    服务器产生session, 会在客户端请求的时候,把生成cookie的携带过去。  

    客户端每次发送请求的时候,都会主动加上cookie。相当于一个id标识

    服务器session里面记录了生成的id对应的标识,形成了记忆。

   这个cookie是有时间的,时间由后端进行设置。 三.Token(令牌)

三.Token是什么?

举个例子:当用户登录成功的时候,会拿到一个token,token是什么?加密串:当前用户的信息加密,身份标识,token是一个身份标识,不是永久有效。当拿到Token后需要对Token进行存储,可以存储在cookie里面。

      存储的方法: 可以使用插件

      js-cookie.js

      里面提供三个方法:

       (1) Cookie.set(key,value)--------->存

       (2) Cookie.get(key)-------->取

       (3)Cookie.remove(key) -------->删除

实例开发中遇到的问题:

     (1) 将token存储在vuex中,vuex刷新就没了,需要解决刷新就没了

     (2)这个时候就需要上面提供的api来解决vuex刷新的问题。

     (3) 代码:

在State里面
State(){
//如果没有则为空
Token:Cookie.get(key)||''
}
  相关解决方案