vue中LocalStorage与SessionStorage的区别与用法

目录
  • 什么是LocalStorage
  • 什么是SessionStorage
  • LocalStorage与SessionStorage的区别
  • LocalStorage与SessionStorage的特点
  • LocalStorage与SessionStorage的用法
  • LocalStorage与SessionStorage应用实例

前面把后台的验证机制梳理了一下，主要是Cookie、Session和Token的使用，Django：Cookie设置及跨域问题处理、Django实：Cookie搭配Session使用、Django：基于Token的验证使用，当然这并不表示Token是最优的，还是需要根据项目需求来选择的，也可以混合搭配使用。

今天要做的事将后台发送过来的Token存储到客户端中，这里可以存Cookie、LocalStorage、SessionStorage等地方，Cookie前面已经介绍过了这里直接忽略，我们主要说说LocalStorage和SessionStorage。

什么是LocalStorage

LocalStorage译为“本地存储器”，是HTML5中新增的一个存储对象，跟Cookie一样也是用来本地存储来的，但是解决了Cookie存储空间不足的问题(cookie每条存储空间为4k)，而localStorage浏览器一般支持5M，通常以键/值对形式的字符串进行存储。

什么是SessionStorage

SessionStorage译为“会话存储”，也是HTML5新增的一个存储对象， 用于本地临时存储同一窗口的数据，在关闭窗口之后将会删除这些数据，SessionStorage浏览器一般支持5M，通常以键/值对形式的字符串进行存储。

LocalStorage与SessionStorage的区别

LocalStorage生命周期是永久,除非主动清除LocalStorage信息，否则这些信息将一直存放在客户端。而SessionStorage生命周期是临时，仅在当前会话窗口有效，关闭页面或浏览器数据就会自动被清除。

LocalStorage与SessionStorage的特点

1.不同浏览器之间无法共享LocalStorage或SessionStorage中的数据。

2.LocalStorage和SessionStorage可以使用统一的API接口。

3.LocalStorage或SessionStorage通常以键/值对形式的字符串进行存储，所以在存储时需要对数据格式进行转换，使用JSON.stringify方法将对象转换成字符串，提取时用JSON.parse方法将字符串转换成对象。

4.LocalStorage或SessionStorage是HTML5的新属性，所以需要较新的浏览器才支持。

LocalStorage与SessionStorage的用法

因为LocalStorage与SessionStorage的应用一致，这里就不多做解释了，以LocalStorage为例。

LocalStorage提供了5个方法，分别是clear（清除LocalStorage）、getItem（获取本地数据）、key（取下标对应键的值）、removeItem（删除以保存数据）、setItem（设置保存数据）。

下面是具体的使用方法和说明，直接用localStorage.就可以带出来对应的方法，我们只要理解其对应的应用属性就可以使用了。

这样我们就可以使用localStorage.setItem('键','值')将服务器传过来的数据存入客户端本地，存储前记得将数据进行转换。

LocalStorage与SessionStorage应用实例

下面是我实际开发中的应用，前面我通过JsonResponse向前端发送了JSON数据，里面包含了data（用户请求的数据）、token（服务器生成的token）和code（后台处理的状态码），前端收到这些数据后对数据进行处理，判断code返回是否成功，如果成功我们就解析数据并将数据存入本地，否则则访问失败。

这里我用 localStorage和sessionStorage分别存了两个数据，localStorage是自定义的，sessionStorage是从后台获取的，打开浏览器开发者工具，在Application中我们可以在Storage下面的localStorage和sessionStorage分别找到我们存储的对应值。

到此这篇关于vue中LocalStorage与SessionStorage的区别与用法的文章就介绍到这了,更多相关vue LocalStorage与SessionStorage内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue中localstorage和sessionstorage的使用

    1. 项目使用中暴露出来的几个问题 大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多 项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用 2. 解决办法 封装storage的使用方法,统一处理 规范storage的key值的命名规则 规范storage的使

  • vue项目如何监听localStorage或sessionStorage的变化

    出现这个问题的起因:在一个VUE页面中,引入两个组件,A组件实现基础信息展示,B组件展示列表,我要通过A组件的一个按钮触发状态,然后B组件根据A组件触发的状态来做业务处理,首先想到的是把状态放在localStorage,接下去就是在B组件怎么监听A组件状态 解决方法: 1.首先在 main.js 中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件并派发事件.

  • vue中LocalStorage与SessionStorage的区别与用法

    vue中LocalStorage与SessionStorage的区别与用法

    目录 什么是LocalStorage 什么是SessionStorage LocalStorage与SessionStorage的区别 LocalStorage与SessionStorage的特点 LocalStorage与SessionStorage的用法 LocalStorage与SessionStorage应用实例 前面把后台的验证机制梳理了一下,主要是Cookie.Session和Token的使用,Django:Cookie设置及跨域问题处理.Django实:Cookie搭配Sessio

  • Vue 中 filter 与 computed 的区别与用法解析

    Vue 中 filter 与 computed 的区别与用法解析

    watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据,每次打开页面都会重新加载一次, 但是computed如果之前进行过计算他会将计算的结果

  • JS 中LocalStorage和SessionStorage的使用

    最近因为项目上需要使用到客户端存储,所以稍微研究了一下,以下说说自己的理解和使用经验 1.调用方法相同 各自都包含以下几种操作: //根据key获取对应的值; window.sessionStorage.getItem(key); window.localStorage.getItem(key); //新增key-value,若key已存在,则更新value; window.sessionStorage.setItem(key,value); window.localStorage.setIte

  • JS中LocalStorage与SessionStorage五种循序渐进的使用方法

    JS中LocalStorage与SessionStorage五种循序渐进的使用方法

    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现). localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了. 不同

  • 浅析Vue中method与computed的区别

    在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed: 为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模

  • 深入浅析Vue中mixin和extend的区别和使用场景

    Vue中有两个较为高级的静态方法mixin和extend,接下来我们来讨论下关于他们各自的原理和使用场景. Mixin: 原理: 先来看看官网的介绍: 参数:{Object} mixin 用法: 混入也可以进行全局注册.使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例.使用恰当时,这可以用来为自定义选项注入处理逻辑. // 为自定义的选项 'myOption' 注入一个处理器. Vue.mixin({ created: function () { var myOption

  • vue中watch和computed的区别与使用方法

    computed 计算属性说明: computed 是基于响应性依赖来进行缓存的.只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算).若没改变,计算属性会立即返回之前缓存的计算结果. 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化的值. computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对

  • vue中defineProperty和Proxy的区别详解

    vue中defineProperty和Proxy的区别详解

    Proxy的出现,给vue响应式带来了极大的便利,比如可以直接劫持数组.对象的改变,可以直接添加对象属性,但是兼容性可能会有些问题 Proxy可以劫持的数组的改变,defineProperty 需要变异 defineProperty 中劫持数组变化的变异的方法 可以理解为在数组实例和原型之间,插入了一个新的原型的对象,这个原型方法实现了变异的方法,也就真正地拦截了数组原型上的方法 我们来看下vue2.x的源码 // vue 2.5.0 var arrayProto = Array.prototy

  • 详解vue中$router和$route的区别

    详解vue中$router和$route的区别

    我们在 vue 项目中一般都会用到路由,而 vue-router 是 vue.js 官方的路由管理器. this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(

随机推荐