美文网首页让前端飞饥人谷技术博客
选择一项后,页面跳转保持该选项

选择一项后,页面跳转保持该选项

作者: 小7丁 | 来源:发表于2018-10-30 14:08 被阅读5次
    三个选项
    • 需求:假如2个页面上有同样上图的3个选项,当用户在第一个页面选择了第2项之后,跳转至第二个页面应该也同样选择第2项。并且当页面关闭后再打开仍然保持选择。

    方案一: localStorage

    watch: {
        selectedRegion (val) {
          localStorage.setItem('selectedRegion', val)
        }
      }
    

    watch这个被选择的选项,当它改变的时候就讲值塞进localStorage里面。
    这时候localStorage就存了相应的值,只需要页面跳转的时候去拿到这个值就好了。

    const localSelectedRegion = localStorage.getItem('selectedRegion')
            
    this.selectedRegion = localSelectedRegion ? 
    (selectRegion.indexOf(localSelectedRegion) === -1 ? selectRegion[0] : localSelectedRegion) 
    : selectRegion[0]
    
    • 满足两个需求:进入页面默认选择第一项。当选项内没有localStorage值时,取第一个值。

    方案二:sessionStorage

    • 当页面关闭后,不保持原来的选择,默认选择第一项。
      只需要把上面的localStorage改成sessionStorage即可

    方案三:放一个全局变量来存值

    效果和方案二一样

    相关文章

      网友评论

        本文标题:选择一项后,页面跳转保持该选项

        本文链接:https://www.haomeiwen.com/subject/drwwtqtx.html