【问题标题】:localstorage value is changed on page refreshlocalstorage 值在页面刷新时更改
【发布时间】:2017-04-07 17:26:08
【问题描述】:

我正在为我的 html 应用程序创建一个欢迎屏幕。我使用来自 github 的欢迎屏幕插件。你可以在这里查看https://github.com/valnub/welcomescreen.js

现在我想在 localstorage 值为 0 时显示欢迎屏幕。当单击欢迎屏幕的关闭按钮时,我将 localstorage 值更改为 1。但在页面刷新时,localstorage 值再次设置为 0。

怎么做这是我的js文件。

/*jslint browser: true*/
/*global console, Welcomescreen, $*/

// Init method

$(document).ready(function () {
  localStorage.setItem("welscreen", "0");	
  var welcomeTour = localStorage.getItem("welscreen");
	
  if (welcomeTour == 0) {

    $(document).ready(function () {     
       var options = {
            'bgcolor': '#0da6ec',
            'fontcolor': '#fff',
            'onOpened': function () {
             console.log("welcome screen opened");
	         console.log(welcomeTour);
       },
      'onClosed': function () {
          localStorage.setItem("welscreen","1");
	      var welcomeTour = localStorage.getItem("welscreen");
	      console.log("welcome screen closed");
	      console.log(welcomeTour);
        }
     },
     welcomescreen_slides,
     welcomescreen;

    welcomescreen_slides = [
      {
        id: 'slide0',
        picture: '<div class="tutorialicon">♥</div>',
        text: 'Welcome to this tutorial. In the <a class="tutorial-next-
        link" href="#">next steps</a> we will guide you through a manual that will teach you how to use this app.'
      },
      {
        id: 'slide1',
        picture: '<div class="tutorialicon">✲</div>',
        text: 'This is slide 2'
      },
      {
        id: 'slide2',
        picture: '<div class="tutorialicon">♫</div>',
        text: 'This is slide 3'
      },
      {
        id: 'slide3',
        picture: '<div class="tutorialicon">☆</div>',
        text: 'Thanks for reading! Enjoy this app or go to <a class="tutorial-previous-slide" href="#">previous slide</a>.<br><br><a class="tutorial-close-btn" href="#">End Tutorial</a>'
      }
   ];

  welcomescreen = new Welcomescreen(welcomescreen_slides, options);

  $(document).on('click', '.tutorial-close-btn', function () {
    welcomescreen.close();
  });

  $('.tutorial-open-btn').click(function () {
    welcomescreen.open();  
  });

  $(document).on('click', '.tutorial-next-link', function (e) {
    welcomescreen.next(); 
  });

    $(document).on('click', '.tutorial-previous-slide', function (e) {
       welcomescreen.previous(); 
     });      
   });
 };
});

【问题讨论】:

  • 当然设置为0,你每次都在这里:localStorage.setItem("welscreen", "0");。你需要检查它是否已经存在。
  • 因为在 document.ready 上设置了本地存储变量。每次文档准备好时,它都设置为零。

标签: javascript jquery html local-storage


【解决方案1】:

改变这个:

localStorage.setItem("welscreen", "0"); 
var welcomeTour = localStorage.getItem("welscreen");

到这里:

var welcomeTour = localStorage.getItem("welscreen");
if(welcomeTour === undefined || welcomeTour === null) {
   localStorage.setItem("welscreen", "0");
   welcomeTour = "0";
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-11-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多