在页面关闭时保存动态变量答案

【问题标题】：Save dynamic variables on page close在页面关闭时保存动态变量
【发布时间】：2015-11-06 01:02:04
【问题描述】：

我目前正在为一个学校项目构建一个网站，该网站在用户导航时将 json 数据动态加载到页面中。这是我现在正在使用的代码：

$(function () {  
var $divs = $(".divs > div"),
    N = $divs.length,
    C = 0;                   // Current    

$divs.hide().eq(C).show();
$("#next, #prev").click(function () {
    $divs.stop().fadeOut().eq((this.id == 'next' ? ++C : --C) %N).fadeIn();       
}); // close click function
}); // close main function

var content = jSONtexts.texts;
$(document).ready(function () {
$("#content0").html(content[0].content);
$("#content1").html(content[1].content);
$("#content2").html(content[2].content);
$("#content3").html(content[3].content);
$("#content4").html(content[4].content);
$("#content5").html(content[5].content);
$("#content6").html(content[6].content);
$("#content7").html(content[7].content);
$("#content8").html(content[8].content);
});

在我的 html 中，我将 div 设置为我想要呈现的特定 json 数据的容器。它现在很简陋，但是用户单击“下一个”或“上一个”，并且 json 的不同部分加载到可见 div 中。

我需要能够保存 div 显示的内容（也许使用“C”变量？） - 到 cookie 中，并在用户返回时加载该 div。我试过使用 js.cookie.js，很可能是我用错了，这就是我正在尝试的：

$( window ).unload(function() {
    Cookies.set('pageState', 'C');
 }); //close cookie function

但这似乎不起作用。当我尝试将它放在与 C 变量相关的 .js 文件中的任何位置时，它会中断我的 json 加载。

我被难住了。我在谷歌上到处找，人们所说的一切都破坏了我的 json 函数。请帮忙！

如果有人有任何想法，我将永远感激不尽！

谢谢山姆

【问题讨论】：

你可以使用localStoragew3schools.com/html/html5_webstorage.asp
您可以尝试仅使用标准 cookie 功能：document.cookie = 'yourCookieText'; 和 allCookies = document.cookie;

标签： javascript jquery html json cookies

【解决方案1】：

Cookie 不是保存这些数据的最佳做法，因为 Cookie 将随所有请求一起发送。

使用需要使用HTML5 localStorage在客户端保存数据。 http://www.w3schools.com/html/html5_webstorage.asp

为相同的制作演示

document.getElementById("textInput").value = localStorage.getItem("pageState");

window.addEventListener("unload", function() {
   localStorage.setItem("pageState", document.getElementById("textInput").value);
 });

&lt;input id="textInput" type="text" /&gt;

演示：http://jsfiddle.net/kishoresahas/vvkdge2q/

【讨论】：

这似乎是我需要走的路 - 谢谢！我可以在我的代码中将 .getElementById 设置为“C”变量吗？我需要它在用户与页面交互时动态更改。我需要设置一个中间变量来传输值吗？

【解决方案2】：

正如 @KishoreSahas 在 cmets 中已经建议的那样，我建议您使用 localStorage 而不是 cookie。

你可以像这样存储你需要的东西

localStorage.setItem("veryimportantdata", "INeedThisLater");

然后像这样稍后取回

var data = localStorage.getItem("veryimportantdata");
console.log(data); // prints out "INeedThisLater"

【讨论】：