2017-04-07 74 views
1

我正在为我的html应用程序创建一个欢迎屏幕。并即时使用github的welcomescreen插件。你可以在这里检查它https://github.com/valnub/welcomescreen.js本地存储值在页面刷新时更改

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

该怎么做,这是我的js文件。

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

 
// Init method 
 

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

 
    $(document).ready(function() {  
 
     var options = { 
 
      'bgcolor': '#0da6ec', 
 
      'fontcolor': '#fff', 
 
      'onOpened': function() { 
 
      console.log("welcome screen opened"); 
 
\t   console.log(welcomeTour); 
 
     }, 
 
     'onClosed': function() { 
 
      localStorage.setItem("welscreen","1"); 
 
\t  var welcomeTour = localStorage.getItem("welscreen"); 
 
\t  console.log("welcome screen closed"); 
 
\t  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(); 
 
    });  
 
    }); 
 
}; 
 
});

+2

当然它设置为'0',你这样做,在这里每次:'localStorage的.setItem(“welscreen”,“0”);'。你需要检查它是否已经存在。 – Arg0n

+0

,因为本地存储变量是在document.ready上设置的。每次准备好文档时将其设置为零。它的工作原理是 – sainu

回答

4

更改此:

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"; 
} 
+0

。非常感谢。 –

相关问题