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

Question

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
        }
      })
    }
  }
}

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

#使用了关闭无痕模式（之前用的无痕模式），没有效果，换了浏览器还是没有效果

Answer 1

试试使用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")); // 空