Vue项目代码改进(三)—— Cookie、LocalStorage和SessionStorage的使用

存在问题
如果在退出页面时,没有点击“退出”按钮,而是直接关闭页面,token并没有被清除,依然能通过访问http://localhost:8080/#/ 直接进入主页。
原因
使用了localStorage而非sessionStorage或Cookie

一、基本概念

1. Cookie(HTML4的本地存储 cookie)

Cookie非常小,大小在4KB左右。主要用途是保存登录信息,比如登录一个网站市场,是可以看到“记住密码”,这通常就是通过在Cookie中存入一段辨识用户身份的数据来实现的。

Cookie机制:
(1)如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随着关闭而结束,这种cookie简称cookie会话。
(2)如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据依然存在,直到过期时间结束才消失。

缺点:
(1)大小受限
(2)用户可以操作(禁用)cookie,使功能受限
(3)安全性较低
(4)有些状态不可能保存在客户端。
(5)每次访问都要传送cookie给服务器,浪费带宽。
(6)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。

HTML5中与本地存储相关的两个重要内容:Web Storage与本地数据库。其中,Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点,HTML5不再使用它,转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能,使用它可以在客户端本地建立一个数据库,原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了,这大大减轻了服务器端的负担,同时也加快了访问数据的速度。

2. LocalStorage( HTML5的本地存储)

将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。

3.SessionStorage( HTML5的本地存储)

将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

这两者的区别在于,sessionStorage为临时保存,而localStorage为永久保存。

localStorage与sessionStorage对比
1、生命周期:
localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。sessionStorage只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。
2、存储大小:localStorage和sessionStorage的存储数据大小一般都是:5MB
3、存储位置:localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。
4、存储内容类型:localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
5、获取方式:localStorage:window.localStorage;;sessionStorage:window.sessionStorage;。
6、应用场景:localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;

二、对比

在这里插入图片描述

三、使用

Cookie1: vue-cookies安装 npm install vue-cookies --save使用  import VueCookies from 'vue-cookies'    Vue.use(VueCookies)API   this.$cookies.set(keyName,value)   this.$cookies.get(keyName)   this.$cookies.remove(keyName)2:js-cookie安装   npm install js-cookie --save 使用   import  Cookies  from  'js-cookie'API  Cookies.set('keyName',value)   Cookies.get(keyName)    Cookies.remove(keyName)在Cookie中存对象后取出的时候需要把字符串转成json格式   const  liaUser  =   JSON.parse(Cookies.get("user"))
LocalStorage和sessionStorage具有相同的操作方法1:sessionStorage.setItem("key“,“value”)2:sessionStorage.getItem("key")3:sessionStorage.removeItem("key“)4:sessionStorage.clear()5:点操作和[]操作 sessionStorage.key = "value"     sessionStorage["key"] = "value"

这篇文章讲的挺详细的:cookies、sessionStorage和localStorage解释及区别

写到这里,解决最初的问题只需将所有的localStorage替换成sessionStorage就好了 😃

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

es6 --- Proxy实例的get方法

写一个拦截函数,访问目标对象不存在属性时,会抛出不存在该属性的错误 如果存在该属性时,就返回其值. var person {name: "张三" };var proxy new Proxy(person, {get: function(target, property) {if (property in target) {return target[property];} else {thr…

Vue项目代码改进(四)—— 在使用ElementUI时点击同一个路由,页面报错

这个不可描述的问题是:在使用ElementUI时点击同一个路由,页面报错。 错误代码如下: element-ui.common.js?ccbf:3339 NavigationDuplicated {_ name: "NavigationDuplicated", name: "NavigationDuplicated", message…

关于jQuery对象(类数组对象)以及DOM对象相互转化问题——[object Object]和[object HTMLInputElement]

之前在某官网课程上看有关jQuery和bootstrap的相关教程,有一节课是教我们如何制作价格菜单的按钮以及总价问题 选中按钮,按钮样式会发生变化,右上角价格会自动运算 6个菜单的html结构差不多,先贴出一个菜单的html,如下…

如何去掉bootstrap table中表格样式中横线竖线

修改之前,表格看上去比较拥挤,因为bootstrap table插件中自带斑马线表格样式,有横线和竖线分栏,现在我们不需要这些。应UI设计的要求,要去掉中间的横线和竖线,使用了修改需求中一种简单粗暴的修改方法&…

Vue项目代码改进(五)—— 将侧边栏菜单改造为动态后,如何按需显示不同图标

将侧边栏菜单改造为动态后&#xff0c;目前侧边栏每项的小图标都相同 <el-aside class"aside" width"200px"><el-col :span"24"><el-menudefault-active"2"class"el-menu-vertical-demo"open"handleOpe…

es6 --- Reflect的静态方法

Reflect.get(target, name, receiver): 查找并返回 target对象的 name属性,若没有,返回undefined var myObject {foo: 1,bar: 2,get baz() {return this.foo this.bar;}, }Reflect.get(myObject, foo); // 1// 若name属性部署了读取函数(getter),则读取函数的this 绑定rece…

canvas画出简陋版随鼠标转动眼睛且会眨眼的可爱樱桃小丸子

可到我的github上下载文件 需求&#xff1a; 刚加载时鼠标不移动&#xff0c;眼睛会不停地眨眼眼球会跟随鼠标移动而移动鼠标不移动时恢复眨眼效果提示&#xff1a; 除了眼睛是动态以外&#xff0c;其他静态绘制都在static()函数中利用椭圆的短轴长度先变短后恢复长度来模拟…

Windows 64 位 mysql 5.7以上版本包解压中没有data目录和my-default.ini以及服务无法启动的解决办法以及修改初始密码的方法...

LZ初学SQL&#xff0c;本来以为开源的安装很简单&#xff0c;但是中间出现了一些问题&#xff0c;记录下来&#xff0c;希望能帮助到他人。 mysql官网下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/点击打开链接 以5.7.20版本为例 首先安装包解压后&#xff0c;没…

总结 构造函数与非构造函数 原型继承的一个方法

这两天真的一直在看原型以及继承之间的千丝万缕&#xff0c;哇&#xff0c;收获颇多&#xff0c;不过所谓温故知新&#xff0c;还是要多复习复习知识点&#xff0c;才能察觉那些之前不易发现的小小sparkle 真心推荐MDN文档——对象原型&#xff0c;JavaScript 中的继承&#x…

Vue学习笔记(二)—— vue项目中使用axios

一、文档链接 axios文档 vue开发插件 二、axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端&#xff0c;它本身具有以下特征&#xff1a; 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应…

jquery对json 键值对或数组的增加、删除、遍历操作

在前端遍历json键值对或数组遍历的情况也会经常用到&#xff0c;我们知道在java、c#其它的语言里提供方便的方法来操作&#xff0c;那么在json里面有没有类似的方法呢&#xff0c;废话就不多说了上代码&#xff1a;var jsonStr{}; //增加 jsonStr["name1"]"yu&q…

廖雪峰老师Git教程代码梳理

建立版本库 创建一个版本库非常简单&#xff0c;首先&#xff0c;选择一个合适的地方&#xff0c;创建一个空目录&#xff08;repository&#xff09;&#xff1a; $ mkdir learngit //创建learngit目录 $ cd learngit //切换当前目录为learngit目录 $ pwd //用于显示当…

es6 --- Promise.catch

Promise.prototype.catch(): 是.then(null, rejection)的别名,用于指定发生错误时的回调函数 p.then( (val) -> console.log(fulfilled:, val)).catch( (err) > console.log(rejected, err));// 等同于 p.then( (val) > console.log(fulfilled:, val)).then(null, (e…

爬虫的一些工具(二)

爬虫的一些工具(二) 1. 常有的工具 (1). python(2). pycharm(3).浏览器i.chromeii.火狐(4).fiddler的使用2 fiddler的使用 (1).操作界面(2)界面含义请求(Request)部分详解名称含义Headers显示客户端发送到服务器的 HTTP 请求的,header 显示为一个分级视图&#xff0c;包含了 We…

微信开发者工具一打开代码编辑区文件全部不见了

今天开微信开发者工具时&#xff0c;一打开竟然文件全部不见了&#xff01;然后页面也编译不出来&#xff0c;搜了一下大神们的建议&#xff1a; 1、在编辑器控制台输入&#xff1a;openVendor 回车 会打开一个文件夹&#xff1a;C:\Users\Administrator\AppData\Local\微信we…

vue项目中所使用的element-UI / echarts

高清版思维导图见后台管理项目地址 1.login登录页面 < el-form >表单 在 Form 组件中&#xff0c;每一个表单域由一个 Form-Item 组件构成&#xff0c;表单域中可以放置各种类型的表单控件&#xff0c;包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimeP…

es6 --- 使用yield*命令遍历完全二叉树

首先定义二叉树的结构: // 定义二叉树的结构 function Tree(left, label, right) {this.left left;this.label label;this.right right; }// 对二叉树采用中序遍历 function* inorder(t) {if(t) {yield* inorder(t.left);yield t.label;yield* inorder(t.right);} }// 生成…

面向对象之继承与派生

阅读目录 一 初识继承二 继承与抽象&#xff08;先抽象再继承&#xff09;三 继承与重用性四 派生五 组合与重用性六 接口与归一化设计七 抽象类八 继承实现的原理&#xff08;可恶的菱形问题&#xff09;九 子类中调用父类的方法一 初识继承 什么是继承 继承是一种创建新类的方…

SpringBoot(十三)-- 不同环境下读取不同配置

一、场景&#xff1a; 在开发过程中 会使用 开发的一套数据库&#xff0c;测试的时候 又会使用测试的数据库&#xff0c;生产环境中 又会切换到生产环境中。常用的方式是 注释掉一些配置&#xff0c;然后释放一下配置。SpringBoot提供了在不同环境下切换不同配置的功能&#xf…

MDN文档基础知识搜集

Array数组&#xff0c;一种允许你存储多个值在一个引用里的结构。var myVariable [1,Bob,Steve,10]; 引用数组的元素只需&#xff1a;myVariable[0], myVariable[1], 等等. 发布工具: FTP 客户端 你还需要一种将文件从本地硬盘上传到远程Web服务器的方法。 为了做到这一点&am…