项目使用的jsp 而页面之间传值 我选了 sessionStorage

说白了sessionStorage是用于临时性的存储数据，在关闭浏览器后，该数据将会被删除，而localStorage则是长期的，就算你关闭了浏览器，该数据还是存在。

存

//对象 
sessionStorage.setItem('checkData',JSON.stringify(vm.checkData));

//值
sessionStorage.setItem('userName',vm.userName);

取

//对象 
vm.checkData = JSON.parse(sessionStorage.getItem("checkData"))

//值
vm.userName= sessionStorage.getItem("userName")

<button>设置</button>
    <button>获取</button>
    <button>删除</button>
    <button>清空</button>
    <script>
        let aBtn = document.querySelectorAll('button')
        aBtn[0].addEventListener('click', ()=>{
            sessionStorage.setItem('username', '张三')
        }, false)
        aBtn[1].addEventListener('click', ()=>{
            let data = sessionStorage.getItem('username')
            console.log(data)
        }, false)
        aBtn[2].addEventListener('click', ()=>{
            sessionStorage.removeItem('username')
        }, false)
        aBtn[3].addEventListener('click', ()=>{
            sessionStorage.clear()
        }, false)

1.想要存储某一段值 或者某一段数据 可以直接使用sessionStorage存储

上效果图  

1.第一张图中数据是 另一个页面传过来的 

 

 2.代码   我要 传过去 传过去 传过去

//事件传过去

1.data代码
 tableData: [
        {
          date: "62051549847662",
          title: "马海龙的快乐生活",
          jine: "84.71",
          qian: "84.71",
          times: new Date(),
          state: "待支付",
          shu: 1,
        },
      ],

2.  mounted() {
    this.zhi();
  },
3 .method:{
  zhi() {
         sessionStorage.setItem("info", JSON.stringify(this.tableData))
          将值转换为JSON字符串的形式 放在info变量中
   },
}

3.页面接收代码  我要接收 我要接收  我要接收 

//事件传过去

1.data代码
 tableData2: [],

2.  mounted() {
   this.qz();
  },
3 .method:{
   qz() {
      this.tableData2 = JSON.parse(sessionStorage.getItem("info"));
    },
}
4.html
     <el-table :data="tableData2" border style="width: 100%" class="one4">
            <el-table-column   prop="date"  label="订单编号"   width="185">
            </el-table-column>                          
            <el-table-column  prop="times"    label="购买时间"  width="180" >
            </el-table-column>
            <el-table-column prop="title" label="商品名称"> </el-table-column>
            <el-table-column prop="shu" label="数量" width="78">
            </el-table-column>
            <el-table-column prop="jine" label="单价" width="180">
            </el-table-column>
            <el-table-column prop="jine" label="订单金额" width="103">
            </el-table-column>
            <el-table-column prop="state" label="交易状态" width="103">
            </el-table-column>
            <el-table-column prop="zuo" label="操作" width="103">
            </el-table-column>
    </el-table>