3

私は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 に保存されており、キー/値のコンソールでこれらの変更を確認できます。ただし、ブラウザーを更新すると、これらは mytimeline に読み込まれません。私は何を取りこぼしたか？

ありがとう。

4

1 に答える 1

2

あなたの投稿までプラグインを見たことがありませんが、API ドキュメントにはあらゆる種類のメソッドがあります。開始する必要がある最も重要なものはgetData().

最も単純なストレージ シナリオは、データを取得し、JSON に変換して保存するために時間間隔を設定することです。別の方法として、use がイベントとやり取りするたびに、保存されているデータを更新することもできます。

基本的なストレージ更新機能は次のようになります。

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

次に、ページが読み込まれるときに、 localStorage にデータがあるかどうかを確認する必要があります。次を使用して、それを javascript オブジェクトに変換します。

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

データが存在する場合は、このデータを使用してプラグインを初期化します。

基本的な概要を説明しました。ここから整理しなければならない多くの詳細があります

于 2012-12-25T04:16:35.940 に答える