javascript - 在页面关闭时保存动态变量

Question

我目前正在为一个学校项目构建一个网站，该网站会在用户导航时动态地将 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

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

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

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

谢谢山姆

Answer 1

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

Use need to use HTML5 localStorage to save data at client side. 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);
 });

<input id="textInput" type="text" />

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