保存用户编辑的时间线？

Question

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

如何使用户更改持久化？

我之前使用 HTML5 localStorage 来保存文本、复选框和选择框条目等，但使用此时间轴，唯一的条目是：

div id="mytimeline"

有一个与之关联的脚本：

        // 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 中，我可以在控制台中看到键/值的这些更改。但是，当我刷新浏览器时，这些并没有被加载到 mytimeline 中。我错过了什么？

谢谢。

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') );

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

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