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

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

我真的给了你一个基本的概述。您需要从这里了解许多细节

保存用户编辑的时间线？

1 个答案: