精华内容
下载资源
问答
  • 在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。 URL传参 这种方式是最简单也是最常用的,这里就不做过多介绍了。 缓存 虽然URL...
  • 在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。 URL传参 这种方式是最简单也是最常用的,这里就不做过多介绍了。 缓存 虽然URL传参...

    在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。

    URL传参

    这种方式是最简单也是最常用的,这里就不做过多介绍了。

    缓存

    虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存。

    使用缓存我们有两种方式:小程序自带Storage和vuex。因为我们的项目是基于mpvue的,顺带也用了vuex了

    • Storage:通过小程序提供的API可以方便的进行缓存操作,如:wx.setStorage、wx.getStorage等。
    • Vuex:这就跟我们平时在做vue项目时一样了,在store中声明一个变量存放传递的参数。

    不管是用上面哪种方式,想法都是一样的:在跳转页面之前先把参数保存到缓存,进入页面之后先获取缓存的参数,然后清除缓存中的参数,进行业务操作。大致伪代码如下:

    // pageA.vue 
    goToPageB() {
      let arg = {
        name: 'Jack',
        age: 9
      }
      // 先把参数保存到缓存 比如这里用的是小程序的Storage,这里采用同步的方式
      wx.setStorageSync({
        key: 'pageArg',
        data: arg
      })
      wx.navigateTo({
        url: 'pageB'
      })
    }
    
    
    // pageB.vue 
    mounted() {
      // 从缓存中取出参数
      let arg = wx.getStorageSync('pageArg')
      // 清除缓存中的页面参数
      wx.removeStorageSync('pageArg')
      // 进行业务处理
      // ...
    }
    复制代码

    大致就是这么个逻辑,可能具体项目中会对存取缓存进行封装,或者在vuex中的做法又不一样,但思想是一样的。

    这样做是可以实现功能,但总感觉不太好,每次都要进行存取操作,感觉很麻烦,而且显得不高端。。。

    于是乎,我们想了个方式传递,就是今天的主角:方法调用。

    方法调用

    这种方式肯定不是最好最优雅的解决方式,因为我们也觉得有欠缺的地方,但目前用起来还是比较方便的,今天放出来也是希望让大家看下怎么进行修改,也以便于我们优化。

    主要是用了小程序提供的getCurrentPages方法,具体内容可查看文档,我这里直接就贴图了,因为文档说的很简单

    小程序对页面的管理感觉跟浏览器中的history差不多,也是有一个页面栈,每次跳转页面都是往这个栈里push一个页面对象,返回的时候就pop一个,当然具体实现要复杂很多。

    这里官方重点提示了:不要尝试修改页面栈,这也就是为什么我说我们的这种传参方式不是很好的原因,我们就是通过方法修改了这个页面栈的数据

    带参数返回上一页

    具体实现方式

    // 往前获取页面对象,类似history.go(-n)
    function getPageByPreCount(n) {
      let currentPages = getCurrentPages()
      return currentPages[Math.max(0, currentPages.length - (n + 1))]
    }
    
    /* 返回上一页并带回参数
     * parameter functionName 上一个页面中用来接收带回参数的方法名称,注意:方法要在data中
     * parameter args  带回去的参数
    */
    function returnPrevPage(functionName, ...args) {
      if (functionName) {
        let prevPage = getPageByPreCount(1)
        wx.navigateBack()
        // 方法里手动调用了页面的方法,并把页面参数在这里作为方法参数传递
        prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] == 'function' 
        && prevPage.data.$root[0][functionName](...args)
      } else {
        wx.navigateBack()
      }
    }
    复制代码

    项目中使用,如在搜索页(search.vue)面中有一个过滤条件是用户,但可以选择多个用户,而且选择用户是在另外一个页面(user-pick.vue)里进行的,这就是要从user-picker.vue跳回search.vue,并带回选中的用户列表信息

    // user-pick.vue
    methods: {
      onSelectConfirm(users) {
        returnPrevPaeg('onSelectUser', users)
      }
    }
    
    // user-pick.vue
    data() {
      return {
        // 把具体处理还是放到了methods中,如果处理逻辑比较简单也可以直接放这里
        onSelectUser: this.onUserOk
      }
    },
    methods: {
      onUserOk(users) {
        // 拿到用户信息 进行搜索操作
        // this.search(user)
      }
    }
    复制代码

    带参数跳转页面

    返回上一页还是比较好理解的,因为页面已经在页面栈里存在了,可以取到并调用方法,但对于跳转的就不太好实现了,因为每次跳转页面都是往页面栈里追加一个新的对象,在跳转前无法获取到该对象。

    这里就是我说的做的不太好的地方,因为我们采用的是setTimeout方式。。。

    // 前进页面回调方法
    function navigateTo (url,functionName,...args) {
      triggerNextPageFn('onHide', functionName, ...args)
      // 跳转后处理数据
      wx.navigateTo({url})
    }
    function redirectTo (url,functionName,...args) {
      triggerNextPageFn('onUnload', functionName, ...args)
      // 跳转后处理数据
      wx.redirectTo({url})
    }
    
    // 通用触发后一个页面的方法
    function triggerNextPageFn(type, functionName, ...args) {
      let prePage = getCurPage()
      if (functionName) {
        // 保存当前变量
        ((..._args) => {
          let oldEventFn = prePage[type]
          prePage[type] = () => {
            // 前进页面改变onReady方法,这里使用了setTimeout
            setTimeout(() => {
              let newPage = getCurPage()
              let oldOnReady = newPage.onReady
              newPage.onReady = function () {
                newPage.data.$root[0] && typeof newPage.data.$root[0][functionName] == 'function' 
                && newPage.data.$root[0][functionName](..._args)
                oldOnReady.apply(newPage)
                newPage.onReady = oldOnReady
              }
            })
            prePage[type] = oldEventFn
          }
        })(...args)
      }
    }
    复制代码

    小结

    传递方式那么多,选择适合自己的才是最重要的。虽然我们写的这个传参方法不是微信官方支持的,因为文档里面明确说了不要修改页面栈,但就目前使用情况来看还是没遇到什么问题的,也许还没遇到吧。

    就本篇文章中介绍的传参方式,如果有不妥的地方或者更好的修改建议,希望大家能帮我们提出来,大家共同进步。

    展开全文
  • 点击上方蓝字关注「悲伤日记」 浮生有梦三千场 穷尽千里诗酒荒前言:六种传值方式为:属性传值$refs$parent通知传值(广播传值)本地传值路由传值在介绍组件传值之前先明确三...

    点击上方蓝字关注「悲伤日记      

    浮生有梦三千场 穷尽千里诗酒荒

    前言:

    六种传值方式为:

    • 属性传值

    • $refs

    • $parent

    • 通知传值(广播传值)

    • 本地传值

    • 路由传值

    在介绍组件传值之前先明确三种组件关系:父子组件、兄弟组件、无关系组件

    上图关系基于:A、B组件同一时刻只存其一的情况下,其中:

    • A是C、D、E的父组件,B是F、G、H的父组件

    • C、D、E是A的子组件,F、G、H是B的子组件

    • C和D、E是兄弟组件,F和G、H是兄弟组件。但E、F不是兄弟组件

    • A和B是无关系组件,E和F也是无关系组件

    一、属性传值

    1.可传值类型

    • 固定值

    • 绑定属性

    • 方法

    • 本类对象

    2.操作步骤

    ①.父组件调用子组件的时候,绑定动态属性 <htitle mess="父组件给子组件传值"></htitle>

    ②. 在子组件里边通过props,接收父组件传过来的值

    3.适用场景

    仅适用于 父组件给子组件传值

    4.属性介绍

    组件属性定义:

     props:["mess","bindMsg","run","fatherThis"],
    

    子组件验证也可传入参数的合法性:

     props:{
            'mess':String,
            'bindMsg':[String, Number],
            'run':Function, 
            'fatherThis':Object,
    }
    

    更多props请查看Vue官网:

    https://cn.vuejs.org/v2/api/?#props

    5.示例代码

    父组件:

    <template>
      <div id="app">
        <htitle mess="父组件给子组件传值了" :bindMsg="msg"
    
    
         :run="run" :fatherThis="this"></htitle>
    
    
      </div>
    </template>
    

    子组件:

    <template>
        <div class="divfirst">
            <span>{{mess}}</span>
            <h1>{{bindMsg}}</h1>
            <button @click="run()">点击调用父组件方法</button>
            <button @click="getPrasent()">点击获取父组件实体(实体拿到可以使用用父组件的方法和属性了)</button>
        </div>
    </template>
    
    
    <script>
    export default {
        props:{
            'mess':String,
            'bindMsg':[String, Number],
            'run':Function,
            'fatherThis':Object,
        },
        data(){
            return {}
        },
        methods:{
            getPrasent(){
                this.fatherThis.run();
                alert(this.fatherThis.msg);
            }
        }
    }
    </script>
    

    二、父组件获取子组件数据

     父组件通过$refs获取子组件的数据和方法

    1.可获取类型

    • 子组件属性

    • 子组件方法

    2.操作步骤

    1.调用子组件的时候调用一个ref

    <v-fgsheader ref="header"></v-fgsheader>
    

    2.在父组件中通过
    this.$refs.header.属性
    this.$refs.header.方法

    3.适用场景

    子组件给父组件传值

    4.示例代码

    父组件:

    <template>
        <div class="FGSHome">
            <v-fgsheader ref="header"></v-fgsheader>
            <button @click="getChildProp()">获取子组件的属性的值</button>
            <button @click="getChildMethod()">获取子组件的方法</button>
        </div>
    </template>
    
    
    <script>
    import FGSHeader from './FGSHeader.vue'
        export default{
    
    
            data(){
                return { }
            },
            components:{
                'v-fgsheader':FGSHeader,
            },
            methods: {
              getChildProp(){
                  alert(this.$refs.header.msg);
              },
              getChildMethod(){
                  this.$refs.header.run();
              }
            },
        }
    </script>
    

    子组件:

    <script>
        export default{
            data(){
                return {
                    msg:"我是子组件header的值哟"
                }
            },
            methods:{
                run(){
                    alert("这是子组件Header的方法+"+this.msg);
                }
            }
        }
    </script>
    

    三、子组件获取父组件数据

      子组件通过$parent获取父组件的数据和方法,这种传值方式实际上类似于上边的属性传值中父组件给子组件的传递了子类对象this,只不过Vue官方给封装好了。

    1.可获取类型

    • 父组件属性

    • 父组件方法

    2.操作步骤

    直接在子组件中使用this.$parent.XX,不需要做任何多余操作。

    3.适用场景

    父组件给子组件传值

    4.示例代码

    子组件:

    getFatherProp(){
        alert(this.$parent.fatherMsg);
    },
    getFatherMethod(){
        this.$parent.fatherRun();
    }
    

    四、通知传值(广播传值)

    1.可传值类型

    Vue官网只写了[...args],故通知/广播传值我们定为只传基本数据类型,不能传方法。

    2.操作步骤

    1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例

    2、在要广播的地方引入刚才定义的实例

    3、通过 VueEmit.$emit('名称','数据')传播数据

    4、在接收收数据的地方通过 $on接收广播的数据
    VueEmit.$on('名称',function(){})

    3.适用场景

    适用于父子组件、兄弟组件间进行传值。
    注意 无关系组件不能用这种方式传值。(笔者理解是:对于上图中的A、B组件。假设A广播通知,B接收通知。挂载A的时候B卸载了,也就是说B被内存销毁了,B是接收不到广播的)

    4.属性介绍

    对于通知传值而言,可以一人广播,然后多者接收。

    5.示例代码

    vueEvent.js:

    import Vue from 'vue'
    var vueEvents = new Vue();
    export default vueEvents;
    

    兄弟组件C(广播者)

    import vueEvents from '../Model/vueEvent.js'
    
    
    sendEmit(){
          var numbery =  (Math.random()+300).toFixed(3);
          vueEvents.$emit('notifyToNew',this.homeMsg+numbery);
     }
    

    兄弟组件D(接收者)

    import vueEvents from '../Model/vueEvent.js'
    mounted(){
         var _this = this;
         vueEvents.$on("notifyToNew",function(data_P){
                //注意this的作用域
               console.log('广播传过来的值是'+data_P);
              _this.receive = data_P;
        })
    }
    

    五、本地传值

    本地传值方式对于Vue而言有两种,一种是JS的localStorage,另一种Vuex

    1.可传值类型

    localStorage:String(可通过JSON进行json数据与String之间的转化)
    Vuex:方法、数据、异步方法

    2.操作步骤

    2.1 localStorage

    存:

    localStorage.setItem('tolist',JSON.stringify(this.tolist));
    

    取:

    var tolist = JSON.parse(localStorage.getItem('tolist'));
    

    2.2 Vuex

    2.1 src新建一个vuex文件夹
    2.2 vuex文件夹里新建一个store.js

    2.3 安装vuex cnpm install vuex --save
    2.4 在刚才创建的store.js 中引入vue、vuex 引入vuex 并且use

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    

    2.5 定义数据 state在vuex中用于存储数据

    var state = {  count:1,}
    

    2.6 定义方法 mutations里边放的是方法,方法主要用于改变state里边的数据

    var mutations = {
        incCount(){
                ++state.count;
       }
    }
       //类似于计算属性  state里边的数据改变时候触发的方法。可以做一些操作 并且可以有返回值
    var getterfl={
             completedCountChange(state){
             return state.count * 2 +'位';
            }
        }
    

    Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作

    var actionfl = {
      asynIncCount(context){  
    //因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
          context.commit('incCount');
      }
    }
    

    2.7 实例化 vuex

    const store = new Vuex.Store({
                state,//state: state  简写
                mutations: mutations,//属性的简写是 mutations
        getters:getterfl,
           actions:actionfl,
    })
    

    2.8 对外暴露

    export default  store;
    

    2.9 在需要用的地方引入

    import store from '../vuex/store.js'
    

    2.10 注册store ,放在methods,data同级

    export default {
        data(){
            return{}
        },
        store:store,
        methods:{
            incCount(){
                this.$store.commit('incCount');
            }
        }
    }
    

    2.11 使用vuex

    使用数据: this.\$store.state.count
    调用方法: this.$store.commit('incCount');

    3.适用场景

    父子组件、兄弟组件、无关系组件任意组件之间的传值

    4.品鉴

    Vuex本质上也是一种本地存储,比localStorage的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化,所以就会被在浏览器中获取到。

    六、路由传值

    1.父组件push使用this.$router.push
    2.在子组件中获取参数的时候是this.$route.params

    1 、动态路由传值:

     1.1 配置动态路由
          routes:[
             //动态路由参数  以冒号开头
             {path:'/user/:id',conponent:User}
           ]
    
    
    1.2 传值
         第一种写法 :  
         <router-link :to="'/user/'+item.id">传值</router-link>
         第二种写法 : 
         goToUser(id) {
             this.$router.push( {path:'/user/'+id});
         }
    1.3 在对应页面取值
           this.$route.params;  //结果:{id:123}
    

    2、 Get传值(类似HTMLGet传值)

    2.1 配置路由
         const routes = [{path:'/user',component:User},]
    2.2 传值
         第一种写法 : 
         <router-link :to="'/user/?id='+item.id">传值</router-link>
         第二种写法 :
          goToUser(id) {
              //'user' 是路径名称
              this.$router.push({path:'user',query:{ID:id}});
          }
    2.3 在对应页面取值
         this.$route.query;  //结果 {id:123}
    

    Tips:路径传递参数会拼接在URL路径后

    3 、命名路由push传值

    3.1 配置路由
       const routes = [{path:'/user',name: 'User',component:User},]
    3.2 传值
       goToUser(id) {
          //'User' 是路径重命名
          this.$router.push({name:'User',params:{ID:id}});
       }
    3.3 在对应页面取值
       this.$route.params;  //结果:{id:123}
    

    Tips:命名路由传递参数不在URL路径拼接显示

    结束语

        单一组件间建议使用属性传值单,一对多传值建议广播传值,路由传值需配合路由进行处理,全局性的值(敏感信息除外)使用本地缓存传值。父子组件间传值使用$refs、$parent。组件各种传值方式各有优劣,诸君请按实际情况选取,如果本文有遗漏或者错误示范,请联系我们~

    往期推荐

    window对象的方法和属性汇总 2020-03-21

    阿里巴巴淘系前端团队2021届前端实习生内推 2020-03-21

    Vue / keep-alive 2020-03-19


    扫码关注“悲伤日记”,订阅更多精彩内容

    展开全文
  • Vue 总结:组件的通讯方式,并实现一个类似element UI的Form表单的实战(包含几种通讯方式) Vue的通讯的方式: 1. props、emit(最常用的父子相互通讯方式) 父组件传入属性,子组件通过props接收,就可以在内部this...

    Vue 总结:组件间的通讯方式(父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参)


    Vue的通讯的方式:

    1. props、emit(最常用的父子通讯方式)

    父组件传入属性,子组件通过props接收,就可以在内部this.XXX的方式使用
    子组件$emit(事件名,传递的参数)向外弹出一个自定义事件, 在父组件中的属性监听事件,同时也能获取子组件传出来的参数

    //	父组件
    <hello-world msg="hello world!" @confirm="handleConfirm"><hello-world>
    //	子组件
     props: {
        msg: {
          type: String,
          default: ''
        }
      },
      methods:{
      	handleEmitParent(){
      		this.$emit('confirm', list)
      	}
      }
    

    2. 事件总线 EventBus (常用任意两个组件之间通讯)

    原理:注册的事件存起来,等触发事件时再调用。定义一个类去处理事件,并挂载到Vue实例的this上即可注册和触发事件,也可拓展一些事件管理

    
    class Bus {
      constructor () {
        this.callbackList = {}
      }
    
      $on (name, callback) {
        // 注册事件
        this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
      }
    
      $emit (name, args) {
        // 触发事件
        if (this.callbackList[name]) {
          this.callbackList[name].forEach(cb => cb(args))
        }
      }
    }
    
    Vue.prototype.$bus = new Bus()
    
    // 任意两个组件中
    // 组件一:在组件的 mounted() 去注册事件
    this.$bus.$on('confirm', handleConfirm)
    
    // 组件二:触发事件(如:点击事件后执行触发事件即可)
    this.$bus.$emit('confirm', list)
    
    

    3. Vuex 状态管理(vue的核心插件、用于任意组件的任意通讯,需注意刷新后有可能vuex数据会丢失)

    创建全局唯一的状态管理仓库(store),有同步(mutations)、异步(actions)的方式去管理数据,有缓存数据(getters),还能分成各个模块(modules)易于维护,详细可访问下方Vuex文档学习

    https://vuex.vuejs.org/zh/

    4. $parent / $root / $children (不推荐使用,不易于后期维护,一旦页面层次发生变化,就需要重新考虑层级关系)

    以父组件为桥梁去注册事件和触发事件来实现的兄弟组件通讯

    // 子组件一:
    this.$patent.$on('confirm', handleConfirm)
    // 子组件二:
    this.$patent.$emit('confirm', list)
    

    获取第一个子组件的数据和调用根组件的方法

    // 获取第一个子组件的数据
    console.log(this.$children[0].msg)
    
    // 调用根组件的方法
    this.$root.handleRoot()
    

    5. $ref (引用的方式获取子节点)

    常用于父组件调用子组件的方法(如:列表数据变化通知子组件重新渲染列表等)
    Vue提供了 $refs 来存储当前所有设置了 ref 属性的组件
    PS:因为需要渲染完才能获取到 ref 属性,所以建议在mounted后去调用,否则有可能会获取不到
    PS:如果定义了两个相同名字的ref则会 this. $refs.XXX将会是一个数组

    // 在template中
    // ...
    <hello-world ref="hello"></hello-world>
    // ...
    export default {
      mounted(){
        // 调用引用的子组件的方法
        this.$refs.hello.handleRef()
      }
    }
    

    6. $attrs / $listeners(常用于对原生组件的封装)

    $attrs 可以获取父组件传进来但没有通过props接收的属性

    // 父组件
    <Child :title="title" :desc="desc" >/>
    
    //  子组件内
    <template>
    <div>
      <h2>{{title}}</h2>
      <p>{{$attrs.desc}}</p>
    </div>
    </template>	
    <script>
    export default {
      props: ['title']
      // ...
    }
    <script>
    
    

    $listeners 会展开父组件的所有监听的事件(click事件等)常用于更高层级的封装
    举个例子(需求):一个页面中有两个组件的点击事件触发方法是一样的"

    //  父组件
    <div>
      <child-first @click="handleClick"></child-first>
      <child-second @click="handleClick"></child-second>
    </div>
    export default {
      methods: {
        handleClick: (){
          alert('hello')
        }
      }
    }
    
    // child-first
    <div v-on="$listeners"></div>
    
    // child-second
    <div v-on="$listeners"></div>
    

    7. provide / inject (祖先及其后代传值)

    常用一些多个组件嵌套封装,一个顶层组件内部的后代组件需要用到顶层组件的数据就使用这种方式

    //  顶层组件
    export default {
      provide(){
        return {
          msg: 'hello world!'
        }
      }
    }
    
    //  后代组件
    export default {
      inject: ['msg']
    }
    

    展开全文
  • JS有哪几种传参方式?

    2019-10-25 14:51:07
    背景介绍 所有函数的参数都是按值传递的,也就是说把函数外部的值...传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下, 一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务...

    背景介绍

    所有函数的参数都是按值传递的,也就是说把函数外部的值赋值给函数内部的参数,就和把值从一个变量赋值到另一个变量一样。

    ————《js高级程序设计》

    有的人可能会把这里的js传参方式,理解成js函数中的参数传递,但是呢,我们所要讲的是页面之间的数据传递。

    传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下, 一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据请求等,都需要一个或多个传参的方法。 那么参数在不同的页面间进行传递,一个页面的参数被另一页面使用,如何才能做到不同页面间进行参数传递?

    JS中页面传递参数的方法

    在JS中有多种页面传递参数的方法:
    一、URL L传参
    把参数值附在url后面传递到其他页面
    二、H5 web storage
    localStroage 和 sessionStorage
    三、Cookie
    使用浏览器Cookie传递参数
    四、Form 表单
    Form表单通过URL传递参数

    URL传参

    把参数值附在url后面传递到其他页面
    如:

    http://xxx.com/login.html?user=laowang&pwd=100 
    
    • 其中 user=laowangpwd=100就是我们传递的参数名称和值。
    • url和参数之间用 "?"隔开
    • 多个参数之间用 "&"符号连接。

    URL地址传递参数的几个特点:

    优点

    • URL地址法简洁易用,可同时传递多个字符型参数;

    • URL地址法可以很方便的在页面之间切换并传递参数,无需额外的处理,基于正常情况比较性能不会损失;

    缺点

    • URL传递参数长度受限,最大为2K;

    • URL只能传递字符型参数,传递中文时,由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误,参数包含中文时可能出现乱码或者参数接收错误;

    • 信息泄露:URL地址在客户端可见,所以涉及隐私的参数需进行加密后才能进行传递,不加密传输会导致信息泄露,产生安全隐患。

    storage本地存储

    sessionStorage会话存储

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

    localStorage 本地存储

    localStorage HTML5本地存储web storage特性的API之一,用于将大量数据(最大5M)保存在浏览器中

    • 保存后数据永远存在不会失效过期,除非手动清除。

    • 不参与网络传输。

    • 一般用于性能优化,可以保存图片、js、css、html 模板、大量数据。

    • 数据以 键/值 (key/value)对存在, web网页的数据只允许该域访问使用

    语法

    不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

    保存数据:localStorage.setItem(key,value); 
    
    读取数据:localStorage.getItem(key); 
    
    删除单个数据:localStorage.removeItem(key); 
    
    删除所有数据:localStorage.clear(); 
    
    得到某个索引的key:localStorage.key(index); 
    

    数据储存

    在有多组数据需要储存时,一般:

    • 建立一个新的对象,然后将多组数据储存在对象中,
    • 使用 JSON.stringify() 来将对象转换为字符串,
    • 使用localStorage.setItem(key,value);保存数据。

    数据提取

    • 使用localStorage.getItem(key)读取数据
    • 使用 JSON.parse 方法将字符串转换为 JSON 对象。
    • 直接引用对象的各个值。

    Cookie

    Cookie是什么

    Cookie是当你浏览某网站时,网站存储在你机器上的一个小文本文件,
    它记录了你的用户ID,密码、浏览过的网页、停留的时间等信息,当你再次来到该网站时,
    网站通过读取Cookie,得知你的相关信息,就可以做出相应的动作,如在页面显示欢迎你的标语,
    或者让你不用输入ID、密码就直接登录等等

    Cookie作用

    Cookie一般有两个作用。
    第一个作用是识别用户身份。
    比如用户 A 用浏览器访问了 http://a.com,那么 http://a.com 的服务器就会立刻给 A 返回一段数据「uid=1」(这就是 Cookie)。当 A 再次访问 http://a.com 的其他页面时,就会附带上「uid=1」这段数据。

    同理,用户 B 用浏览器访问 http://a.com 时,http://a.com 发现 B 没有附带 uid 数据,就给 B 分配了一个新的 uid,为2,然后返回给 B 一段数据「uid=2」。B 之后访问 http://a.com 的时候,就会一直带上「uid=2」这段数据。 借此,http://a.com 的服务器就能区分 A 和 B 两个用户了。

    第二个作用是记录历史。
    假设 http://a.com 是一个购物网站,当 A 在上面将商品 A1 、A2 加入购物车时,JS 可以改写 Cookie,改为「uid=1; cart=A1,A2」,表示购物车里有 A1 和 A2 两样商品了。 这样一来,当用户关闭网页,过三天再打开网页的时候,依然可以看到 A1、A2 躺在购物车里,因为浏览器并不会无缘无故地删除这个 Cookie。 借此,就达到里记录用户操作历史的目的了。

    Cookie的特点

    • Cookie可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下Cookie,这是最常见的做法。
    • 每次网络请求 Request headers 中都会带上Cookie。所以如果 Cookie太多太大对传输效率会有影响。
    • 一般浏览器存储Cookie最大容量为4k,所以大量数据不要存到Cookie。

    Form 表单

    Form表单传值也是通过URL传递参数

    跳转至demo2.com时,
    url为: demo2.com?id=laowang&name=666666

    通常使用的表单的提交方式主要是: post和get两种。

    两者的区别在于:

    post方式是把数据内容放在请求的数据正文部分,没有长度的限制;
    get方式则是把数据内容直接跟在请求的头部的URL后面,有长度的限制。
    而一般在表单的数据提交中,都会选择POST方式,
    因为使用GET方法数据是通过URL传递的,在地址栏中会直接看到传递的数据,这样就缺少安全性。
    而使用POST传递时,是把提交的数据放置在HTTP包的包体中,地址栏不会看到数据。

    常见问题

    既然有如此多种页面传参的方式。那么问题来就来了,在什么情况下,适合使用以上介绍的传递方式呢?

    传递少量不涉及隐私的参数时可以使用直接url或者Form的GET方式传递;

    大量数据可以用POST传递会话信息等可以用cookie和localStorage;

    临时数据可用sessionStorage

    传参方式的优缺点

    URL传参:
    优点:取值方便,可以跨域。
    缺点:值长度有限制。

    H5 Web storage:
    优点:使用起来非常简单、方便。
    缺点:兼容性有点小问题。兼容性: 现代浏览器(firefox safari chrome opera)都支持,IE8以下(不包括IE8)不支持。

    Cookie传参:
    优点:兼容性最好,可以在同源内的任意网页内访问,生命期可以设置。
    缺点:值长度有限制(存储的容量小),还得注意请求接口时别带到http head。

    参考资料

    参考一:js传参方式
    参考二:理解cookie及其用法
    参考三:web Storage

    来源: https://blog.csdn.net/menggx1/article/details/80311369

    展开全文
  • 记录小程序中常用的几种页面传值方式 一、storage wx.setStorage({ key: "key", data: value }) 通过getStorage回调方式获取data值,或者通过wx.getStorageSync(key) 同步获取key对应的data值 二、url...
  • 这时候我们常用的就是使用Intent, Bundle等携带数据。 那么在Flutter的开发过程中,页面之间的数据传递也是必不可少的,又是怎么把一个页面的数据传递(共享)给另外一个页面,或者关闭当前页面并把当前页面的数据...
  • JS有哪几种传参方式

    千次阅读 2018-07-07 09:46:37
    一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据请求等,都需要一个或多个传参的方法。 那么参数在不同的页面间进行传递,一个页面的参数被另一页面使用,如何才能做到不同页面间进行...
  • MUI:页面传参终极版

    万次阅读 2016-11-03 19:51:10
    在普通浏览器端常用的方法有如下几种: 1.利用URL传参页面跳转的时候通过设置window.location.href添加参数,在接收参数的页面通过window.location.search获取参数字符串。 发送参数的页面: window.location....
  • asp.net页面间传值的9种方式

    千次阅读 2019-01-08 02:42:59
    1. Get(即使用QueryString显式传递) 方式:在url后面跟参数。 特点:简单、方便。 缺点:字符串长度最长...常用于2个页面间传递数据。 用法:例如:url后加?UserID=…,跳转到目标页面,目标页面在伺服端可用Req...
  • 页面内数据的传递我们暂且不谈,在这里要说的是页面间跳转的数据传递中比较常用的两种方法:Navigator和wx.navigateTo 1.Navigator方法 在官方文档中Navigator属性如下: 这是正常情况下的页面跳转,该方法通常写在...
  • 1.QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中。如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法。但是对于传递数组或对象的话,就不能用这个方法了...
  • 前言 Ionic3 中父页面给子页面传递参数非常容易,使用框架提供的 ...实际上仍然有用,详细看正文),这个时候就需要别的手段来达到我们的目的了,故本文主要将对 Ionic3 中子页面向父页面传参问题提供笔者常用的...
  • 所以Cookie也可以在页面间传递值。Cookie通过HTTP头在浏览器和服务器之间来回传递的。Cookie只能包含字符串的值,如果想在Cookie存储整数值,那么需要先转换为字符串的形式。 与Session一样,其是针对每一个用户而言...
  • vue 路由传参方式总结

    2019-09-04 16:53:36
    文章目录vue常用的路由间传参方式一:使用```$route```方式二:使用 ```props```将组件与路由解耦```props```传参模式可以分为以下几种:1.布尔值模式 ```true```或 ```false```2.对象模式3.函数模式 vue常用的路由...
  • 本来以为挺简单的一件事情,并且个人认为比较常用的一种方式,一百度全都有了,这些根本不是问题,但是一百度居然出乎我的意料,一堆都不是我想要的结果。无奈啊,自己写一篇比较全都供以后大家一百度吧,哈哈哈。。...
  • 页面传参

    2018-09-14 09:39:00
    页面传参 页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。 在普通浏览器端常用的方法有如下几种: 1.利用URL传参数 在页面跳转的时候通过设置window.location.href添加参数,在接收...
  • 在JS中的传参方式

    2019-11-27 20:24:23
    一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据请求等,都需要一个或多个传参的方法。 js中的传值方式,对于简单类型(比如字符串和数值)就是值传递和引用传递。但是HTML页面之间...
  • 前端面试题(持续更新中)

    万次阅读 多人点赞 2019-11-06 17:16:33
    GET:用于请求访问已经被URI(统一资源标识符)识别的资源,可以通过URL传参给服务器,从指定的资源请求数据 POST:用于传输信息给服务器, 向指定的资源提交要处理的数据 PUT:传输文件,报文主体中包含文件内容,保存到...
  • 页面之间值传递常用的几种方式

    千次阅读 热门讨论 2014-04-30 20:07:01
    1.使用QuerySting在页面间传递值 2.使用Session变量
  • 1.QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中。如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法。但是对于传递数组或对象的话,就不能
  • 页面传参终极版 分类:MUI 页面传值 页面传参数是一种比较常见的业务需求,根据实现原理及适用环境可以分为两大类。 在普通浏览器端常用的方法有如下几种: 1.利用URL传参页面跳转的时候通过设置window....
  • asp.net页面之间传参

    千次阅读 2010-03-26 14:17:00
    asp.net传参·客户机1.查询字苻串RequryString---利用URL在客户机和服务器进行数据交换2.隐藏的窗体字段---在窗体字段中设置和读取数据3.COOKIE---保存在客户浏览器上的数据4.视图状态ViewState---保存页面相关...
  • JS有哪几种传参方式

    千次阅读 2018-05-14 16:36:18
    传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下,一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据请求等,都需要一个或多个传参的方法。那么参数在不.....
  • 页面间传递数据方式:就是使用JSP页面的九大内置对象:域对象。 【request、response、session、application、out、pagecontext、config、page、exception】 ===和servlet的servletContext对象区别。两码事。 取值...
  • 1. 需求背景  需求:spring MVC... 需求有了肯定是解决办法了,一一解决,说明下spring的跳转方式很多很多,我这里只是说一些自我认为好用的,常用的,spring分装的一些类和方法。  (1)我在后台一个contro...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,511
精华内容 1,804
关键字:

常用的页面间传参方式