jQuery autosave plug-in - 入力内容を自動的にクッキーに保存できるjQueryプラグイン

2012/02/08 17:44 Update

TAGS: jQuery | JavaScript | プラグイン | 自動保存 | クッキー

jQuery autosave plug-inは、Webページの入力中のフォームデータを自動的にクッキーに保存／復元できるjQueryプラグインです。

なので、何らかの原因でWebページが閉じられたり、ブラウザーが落ちたりにしても、せっかく入力したデータを失うことはありません。

jQuery autosave plug-inは、デフォルトでは10秒間隔で自動的にフォームフィールドの保存を行います。

動作環境

◇　言語：JavaScript(jQuery)
◇　ライセンス：GPL
◇　その他依存ライブラリ：Cookie Plugin for jQuery

使い方例

■サンプル

<!-- JavaScript定義 -->
<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery.autosave.js"></script>
<script type="text/javascript">
    $(function () {
        $('form *').autosave();
    });
</script>

<!-- HTML定義 -->
<form>
<input type="text" name="inputtext"  />
<textarea name="textarea" rows="12" cols="40" id="textarea"></textarea>
...
</form>

■使い方

$(form_fields).autosave(オプション);

例：

$('textarea').autosave({
  'interval': 20000,
  'unique': 'articleadd'
});

オプション：
autosave クラス属性：クッキーに保存
    デフォルト: '.autosave'
定義例：
<button class="autosave">保存</button>
↑このボタンを押す場合、フォームが自動的に保存される

restore　クラス属性：クッキーから復元
    デフォルト: '.autosave_restore'
定義例：
<button class="autosave_restore">復元</button>
↑このボタンを押す場合、フォームが自動的に復元される

removeCookies　クラス属性：クッキーから削除
    デフォルト: ‘.autosave_removecookies’
定義例：
<a class="autosave_removecookies" href="#">削除</a>
↑このリンクをクリックする場合、保存したデータ自動的に削除される

saving：保存中の表示文字を格納する要素
    デフォルト: ‘.autosave_saving’
定義例：
<span class="autosave_saving" style="display: none; opacity: 1;">Saving…</span>
↑保存動作が実行される場合、[Saving...]が表示される　場所

その他オプションについて、公式サイトをご参照ください。

Relative Articles

我要投稿

jQuery autosave plug-in - 入力内容を自動的にクッキーに保存できるjQueryプラグイン

動作環境

使い方例

Sponsored Link

Comments

Relative Articles

分类

Newest Top10