浏览器端通过Window.localStora和Window.sessionStorage属性来实现本地存储机制

Window.localStora:存储的内容,需要手动清除才会消失

   <div>
      <h2>localStorage</h2>
      <button @click="saveDate()">保存数据到localStorage</button><br/>
      <button @click="readDate()">读取localStorage中的数据</button><br/>
      <button @click="deleteDate()">删除localStorage中的数据</button><br/>
      <button @click="deleteAllDate()">清空localStorage中的数据</button><br/>
  </div>
       //保存数据到localStorage
        saveDate() {
            let person = { name: "JOJO", age: 20 }
            localStorage.setItem('person', JSON.stringify(person))
        },
         //读取localStorage中的数据
        readDate() {
            const person = localStorage.getItem('person')
            console.log(JSON.parse(person))
        },
        //删除localStorage中的数据
        deleteDate() {
            localStorage.removeItem('person')
        },
         //清空localStorage中的数据
        deleteAllDate() {
            localStorage.clear()
        },

在A页面中先存储:
var imgs = form.datalist//声明个变量存储下数据
localStorage.setItem('key',imgs);  //将变量imgs存储到name字段
在B页面中使用:
var naid = localStorage.getItem("key"); //获取指定key本地存储的值

Window.sessionStorage:存储的内容会随着浏览器窗口关闭而消失

        <div>
            <h2>sessionStorage</h2>
            <button @click="saveDate()">保存数据到sessionStorage</button><br/>
            <button @click="readDate()">读取sessionStorage中的数据</button><br/>
            <button @click="deleteDate()">删除sessionStorage中的数据</button><br/>
            <button @click="deleteAllDate()">清空sessionStorage中的数据</button><br/>
        </div>
        //保存数据到sessionStorage
        saveDate() {
            let person = { name: "JOJO", age: 20 }
            sessionStorage.setItem('person', JSON.stringify(person))
        },
         //读取sessionStorage中的数据
        readDate() {
            const person = sessionStorage.getItem('person')
            console.log(JSON.parse(person))
        },
        //删除sessionStorage中的数据
        deleteDate() {
            sessionStorage.removeItem('person')
        },
         //清空sessionStorage中的数据
        deleteAllDate() {
            sessionStorage.clear()
        },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值