如何使用Cookie和HTML5 localStorage

在以前的文章中，Jake分享了一个有关使用Intro.js构建分步指南的教程 。 我们的一位读者提出了一个问题，询问如何使该指南仅出现一次。 换句话说，一旦用户完成了指南，该指南将不会再出现在同一用户的后续访问中 。

有很多方法可以实现此目的，但是在本教程中，我们将仅使用Cookie和localStorage 。 简而言之，Cookie和localStorage都在浏览器中存储一些信息，这些信息可用于确定是否显示分步指南。

让我们开始吧，好吗？

使用Cookie

我们将使用jQuery Cookie插件使代码看起来更简单。 在此处下载jQuery Cookie，然后将其与jQuery一起放入HTML文档中。

<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>

然后，我们需要指定Cookie的name并检索其value ，稍后将在运行IntroJs函数时将其用作参考。

在此示例中，我们将命名Cookie IntroJS并将其存储在名为name的变量中，而将值存储在名为value的变量中。

var name = 'IntroJS';
var value = $.cookie(name);

接下来，使用.oncomplete()提供的.oncomplete()方法，我们可以在浏览器中设置Cookie。 以下面的代码为例，一旦用户单击工具提示上的“完成”按钮，就会创建一个名为IntroJS的Cookie，其值为1。

introJs().start().oncomplete(function() {
	$.cookie(name, 1);
}

现在，刷新浏览器并完成指南。 如果您使用的是Google Chrome浏览器，则只需转到视图>开发人员>开发人员工具>资源（标签） –您可以看到已创建Cookie（截图）。

如前所述，我们不希望该指南再次出现在之前已经完成指南的用户面前。 为此，请仅在浏览器中未设置名为IntroJS的Cookie的情况下，将IntroJS函数与条件函数包装在一起以运行IntroJS函数。

if(value == null) {
	introJs().start().oncomplete(function() {
		$.cookie(name, 1);
	}
};

但是，使用Cookie的缺点是它将过期。 除非明确指定，否则Cookie将成为Session Coookie ，这意味着它将在用户关闭浏览器时被删除。

即使指定了到期时间，这仍然不是理想的解决方案，因为Cookie最终仍将被删除。 因此，让我们现在来看另一个（更好的）解决方案，即使用localStorage 。

使用HTML5 localStorage

简而言之， localStorage的工作方式类似于数据库。 它在用户的浏览器上本地存储一些数据（键和值），然后可以使用JavaScript API进行检索。 与Cookie不同，localStorage是持久性的。

即使在用户关闭浏览器之后，数据也始终在用户的浏览器中可用。 localStorage还比Cookie接受更多的数据。

首先，让我们先设置密钥名称和值。 对于您的信息，我们使用.getItem()从localStorage密钥中检索值。

var name = 'IntroJS';
var value = localStorage.getItem(name);

类似于第一个使用Cookie的示例，我们仅在没有指定数据时才运行IntroJS函数。 换句话说，一旦设置了数据，该指南就不会出现。 使用localStorage，我们可以使用.setItem()设置数据，就像这样。

if(value == null) {
	introJs().start().oncomplete(function() {
		localStorage.setItem(name, 1)
	});
};

现在，刷新浏览器并完成分步指南。 然后，转到“ 视图”>“开发人员”>“开发人员工具”>“资源（Tab）” –在“本地存储”部分，您应该找到一个新密钥，并且其值已经设置。

请注意，localStorage是一项相对较新的技术–根据CanIUse.com，在撰写本文时，仅在以下浏览器中支持localStorage： IE8 +，Firefox 3.5 +，Chrome 4.0 +，Safari 4.0+和Opera 10.5。 + 。

如果出于某种原因需要使用旧版浏览器的用户，可以将localStorage与Cookies结合使用。 这是一个示例代码：

var name = 'IntroJS';
var value = localStorage.getItem(name) || $.cookie(name);
var func = function() {
		if (Modernizr.localstorage) {
			localStorage.setItem(name, 1)
		} else {
		  	$.cookie(name, 1, {
				expires: 365
			});
		}
	};
if(value == null) {
	introJs().start().oncomplete(func).onexit(func);
};

该代码使用Modernizr来检测浏览器的功能。 如果浏览器支持，它将使用localStorage。 否则，它将使用Cookies。

就是这样，伙计们。 我们希望您对本教程有所帮助。 为了进一步参考，您可以查看我们之前关于Modernizr的教程 。

翻译自: https://www.hongkiat.com/blog/jquery-cookies/