Y.L6 2022-09-13 21:56 采纳率: 91.7%
浏览 196
已结题

移动端浏览器对localstorage的失效问题

watch组件

export default {
  name: "watch",
  data() {
    return {
      booklist: {},
      index: 0,
      convitToId: '',
      title: ''
    };
  },
  created: function () {
    this.getbook()
    this.index = Number(this.$route.query.index) + 1
    this.index = localStorage.getItem('his', this.index)
  },
  methods: {
    getbook() {
      axios({
        url: "https://api.pingcc.cn/fictionChapter/search/06e38383-5a6d-3bd5-b0f1-3ae85a13053d",
        method: "GET",
      }).then((res) => {
        this.booklist = res.data.data
      });
    },
    convTo() {
      axios({
        url: "https://api.pingcc.cn/fictionChapter/search/06e38383-5a6d-3bd5-b0f1-3ae85a13053d",
        method: "GET",
      }).then((res) => {
        this.title = res.data.data.chapterList[this.index - 1].title
        this.convitToId = res.data.data.chapterList[this.index].chapterId
        localStorage.setItem('his', this.index)
        this.$router.push({
          path: `/main`,
          query: {
            title: this.title,
            chapterId: this.convitToId,
            index: Number(this.index) - 1
          }
        })
      });
    }
  },
};

view-main组件,关闭浏览器后像watch组件传出当前章节的索引,或者点击首页按钮后也可以达到传值效果

export default {
  name: 'view-main',
  props: ['chapterId'],
  data() {
    return {
      chapterIdNew: '',
      contentList: [],
      totalList: [],
      title: '',
      index: 0
    }
  },
  mounted() {
    this.chapterIdNew = this.$route.query.chapterId
    this.totalList = JSON.parse(localStorage.getItem('book'))
    this.title = this.$route.query.title
    this.index = this.$route.query.index
    this.content()
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('his',this.index)
    })
  },
  methods: {
    content() {
      axios({
        url: "https://api.pingcc.cn/fictionContent/search/" + this.chapterIdNew,
        method: "GET",
      }).then((res) => {
        this.contentList = res.data.data
      });
    },
    next() {
      if (this.index <= this.totalList.length) {
        this.index++
        // this.totalList = JSON.parse(localStorage.getItem('book'))
        this.chapterIdNew = this.totalList[this.index].chapterId
        this.title = this.totalList[this.index].title
        document.documentElement.scrollTop = 0
        this.content()
      } else {
        alert('已经是最后一章了')
      }
    },
    back() {
      if (this.index > 0) {
        this.index--
        // this.totalList = JSON.parse(localStorage.getItem('book'))
        this.chapterIdNew = this.totalList[this.index].chapterId
        this.title = this.totalList[this.index].title
        document.documentElement.scrollTop = 0
        this.content()
      } else {
        alert("已经是第一章了")
      }
    },
    save() {
      this.$router.push({
        path: '/watch',
        query: {
          index: this.index
        }
      })
    }
  }
}



达成效果在这张图片片上的已经看见第几章显示数字,电脑端可以显示,手机端苹果自带浏览器关闭无痕模式和谷歌浏览器都无效果(均关闭无痕模式)

img

#使用了关闭无痕模式(之前用的无痕模式),没有效果,换了浏览器还是没有效果

  • 写回答

7条回答 默认 最新

  • Z_pigeon 2022-09-13 22:43
    关注

    试试使用cookies来存储

    这里是对cookies的函数封装,可以直接拉到下面
    var CookieUtil = {
        // 设置cookie
        set: function (name, value, expires, domain, path, secure) {
            var cookieText = "";
            cookieText += encodeURIComponent(name) + "=" + encodeURIComponent(value);
            if (expires instanceof Date) {
                cookieText += "; expires=" + expires.toGMTString();
            }
            if (path) {
                cookieText += "; path=" + path;
            }
            if (domain) {
                cookieText += "; domain=" + domain;
            }
            if (secure) {
                cookieText += "; secure";
            }
            document.cookie = cookieText;
        },
        // name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
        // 获取cookie
        get: function (name) {
            var cookieName = encodeURIComponent(name) + "=",
                cookieStart = document.cookie.indexOf(cookieName),
                cookieValue = "";
            if (cookieStart > -1) {
                var cookieEnd = document.cookie.indexOf(";", cookieStart);
                if (cookieEnd == -1) {
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
            }
            return cookieValue;
        },
        // 删除cookie
        remove: function (name, domain, path, secure) {
            this.set(name, "", Date(0), domain, path, secure);
        }
    }
    
    
    
    // 测试
    CookieUtil.set("name", "zhang");
    var name = CookieUtil.get("name");
    alert(name); // zhang
    CookieUtil.remove("name");
    alert(CookieUtil.get("name")); // 空
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(6条)

报告相同问题?

问题事件

  • 系统已结题 9月23日
  • 已采纳回答 9月15日
  • 创建了问题 9月13日

悬赏问题

  • ¥15 怎么实现输入一个要删除的数后删除后显示剩余数再输入再删除显示剩余数(语言-c语言)
  • ¥35 引用csv数据文件(4列1800行),通过高斯-赛德尔法拟合曲线,在选取(每五十点取1点)数据,求该数据点的曲率中心。
  • ¥20 程序只发送0X01,串口助手显示不正确,配置看了没有问题115200-8-1-no,如何解决?
  • ¥15 Google speech command 数据集获取
  • ¥15 vue3+element-plus页面崩溃
  • ¥15 像这种代码要怎么跑起来?
  • ¥15 安卓C读取/dev/fastpipe屏幕像素数据
  • ¥15 pyqt5tools安装失败
  • ¥15 mmdetection
  • ¥15 nginx代理报502的错误