安徽专业网站制作公司,合肥瑶海区医院,企业网站开发丨薇,简述网站设计的开发流程存在问题#xff1a; 如果在退出页面时#xff0c;没有点击“退出”按钮#xff0c;而是直接关闭页面#xff0c;token并没有被清除#xff0c;依然能通过访问http://localhost:8080/#/ 直接进入主页。 原因#xff1a; 使用了localStorage而非sessionStorage或Cookie 一… 存在问题 如果在退出页面时没有点击“退出”按钮而是直接关闭页面token并没有被清除依然能通过访问http://localhost:8080/#/ 直接进入主页。 原因 使用了localStorage而非sessionStorage或Cookie 一、基本概念
1. CookieHTML4的本地存储 cookie
Cookie非常小大小在4KB左右。主要用途是保存登录信息比如登录一个网站市场是可以看到“记住密码”这通常就是通过在Cookie中存入一段辨识用户身份的数据来实现的。
Cookie机制 1如果不在浏览器中设置过期时间cookie被保存在内存中生命周期随着关闭而结束这种cookie简称cookie会话。 2如果在浏览器中设置了cookie的过期时间cookie被保存在硬盘中关闭浏览器后cookie数据依然存在直到过期时间结束才消失。
缺点 1大小受限 2用户可以操作禁用cookie使功能受限 3安全性较低 4有些状态不可能保存在客户端。 5每次访问都要传送cookie给服务器浪费带宽。 6cookie数据有路径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、获取方式localStoragewindow.localStorage;sessionStoragewindow.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)2js-cookie安装 npm install js-cookie --save 使用 import Cookies from js-cookieAPI Cookies.set(keyName,value) Cookies.get(keyName) Cookies.remove(keyName)在Cookie中存对象后取出的时候需要把字符串转成json格式 const liaUser JSON.parse(Cookies.get(user))
LocalStorage和sessionStorage具有相同的操作方法1sessionStorage.setItem(key““value”)2sessionStorage.getItem(key)3sessionStorage.removeItem(key“)4sessionStorage.clear()5点操作和[]操作 sessionStorage.key value sessionStorage[key] value这篇文章讲的挺详细的cookies、sessionStorage和localStorage解释及区别 写到这里解决最初的问题只需将所有的localStorage替换成sessionStorage就好了
