【发布时间】: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