sessionStorage

﹏ヽ暗。殇╰゛Y 2024-03-22 14:57 52阅读 0赞

## sessionStorage ##

sessionStorage用于在浏览器中存储会话级别的数据，数据存储在session中。

// 存储数据到sessionStorage中
    sessionStorage.setItem("key", "value");
    // 从sessionStorage中读取数据
    let value = sessionStorage.getItem("key");
    // 删除sessionStorage中的数据
    sessionStorage.removeItem("key");
    // 清空sessionStorage中的所有数据
    sessionStorage.clear();

注意，sessionStorage中仅支持存储字符串类型的数据。如果需要存储其他类型的数据，需要使用**JSON.stringify()**方法将其转换成字符串类型，再存储到sessionStorage中；取出数据时，则需要使用**JSON.parse()**方法将其还原为原来的数据类型。

## 示例 ##

> 在A页面封装对象到sessionStorage中，在B页面取出

A页面

<el-table :data="cutObj.records" style="width: 100%" border="1">
          <el-table-column prop="id" label="订单号"  />
          <el-table-column prop="totalPrice" label="订单总价" />
          <el-table-column prop="status" label="订单状态" />
          <el-table-column prop="orderDate" label="下单时间" />
          <el-table-column fixed="right" label="订单详情" width="">
            <template #default="scope">
              
              <el-button link type="primary" size="small" @click="gotoOrderDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

gotoOrderDetail(orderObj){
        //封装 对象转字符串
        sessionStorage.setItem("orderBean",JSON.stringify(orderObj));
        //Vue Router提供的（前端路由跳转）方法
        this.$router.push('/orderDetail2')
      }

B页面

methods:{
        findById(){
          let str=sessionStorage.getItem("orderBean");
          //字符串转对象
          this.orderBean = JSON.parse(str);
          let orderId=this.orderBean.id;
          axios.get("/project/order/findById",{params:{orderId}}).then(resp=> {
            this.orderObj = resp.data;
          });
        }
    }