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数据的容器。它现在很简陋，但是用户点击了下一个＆＃39;或者之前的＆＃39;并且json的不同部分加载到可见div中。

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

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

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

我很难过。我在google上到处寻找，人们所说的一切都会破坏我的json功能。求救！

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

由于萨姆

Answer 1

正如@KishoreSahas已经在评论中建议的那样，我建议你使用localStorage代替cookie。

你可以存储你需要的东西

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

然后像这样把它拿回来

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

Answer 2

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

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

制作相同的演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

在页面关闭

2 个答案: