javascript - 保存用户编辑的时间线？

Question

我一直在研究 http://almende.github.com/chap-links-library/timeline.html它允许用户在时间轴上添加/编辑/删除事件。关闭或刷新浏览器会将其重置为预加载的数据源 - JSON、表格信息或 Google 电子表格。用户添加或更改的任何内容都不会保存。

如何使用户更改持久化？

我以前使用 HTML5 localStorage 来保存文本、复选框和选择框条目等。但是对于这个时间轴，唯一的条目是:

div id="我的时间线"

它有一个与之关联的脚本:

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));

这是对构建时间轴容器的 JS 的引用。

有什么想法、例子或建议吗？

谢谢。

更新:这是我目前所拥有的:

//Check to see if localStorage is supported
var db = getLocalStorage() || alert("Local Storage Not supported in this browser.  Try updating to the latest Firefox, Chrome or Safari browsers.");

function getLocalStorage() {
    try {
        if(window.localStorage ) return window.localStorage;            
}
    catch (e)
{
    return undefined;
}
}  

//Store Timeline Data to localStorage
function storeTimelineData(){
    var data=timeline.getData();
    localStorage.setItem('mytimeline', JSON.stringify(data));
    var storedData=JSON.parse( localStorage.getItem('myTimeline') );

// clear storage
function clearLocal() {
clear: localStorage.clear();
return false;
}

我还进行了这些更改 - body onload="storedData()"尝试加载 localStorage 保存的值并更改 div id="mytimeline"onmouseup="storeTimelineData()"以在更改时存储值时间轴。

对时间线的更改正在保存在 localStorage 中，我可以在键/值的控制台中看到这些更改。但是，当我刷新浏览器时，这些并没有加载到我的时间轴中。我错过了什么？

谢谢。

Answer 1

在您的帖子之前我从未见过插件，但在 API 文档中有各种方法。您需要启动的最重要的一个是 getData()。

最简单的存储方案是设置一个定时间隔来获取数据，将其转换为 JSON 并存储它。替代方法是每次使用与事件交互时更新您存储的数据。

基本的存储更新函数如下:

function storeTimelineData(){
      var data=timeline.getData();
      localStorage.setItem('myTimeline', JSON.stringify(data));
}

然后当页面加载时，您需要检查 localStorage 中是否有数据，使用以下方法将其转换为 javascript 对象:

var storedData= JSON.parse( localStorage.getItem('myTimeline') );

如果数据存在，则使用此数据初始化插件。

我真的只是给了你一个基本的概述。您必须从这里整理出许多细节