忍者ブログ

Home > > ブラウザが落ちた時textareaの内容が消えちゃうのがショックなので、cookieに保存しておくという無謀な試み

[PR]

  • 2017-09-24

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet

Home > > ブラウザが落ちた時textareaの内容が消えちゃうのがショックなので、cookieに保存しておくという無謀な試み

Home > JavaScript > ブラウザが落ちた時textareaの内容が消えちゃうのがショックなので、cookieに保存しておくという無謀な試み

ブラウザが落ちた時textareaの内容が消えちゃうのがショックなので、cookieに保存しておくという無謀な試み

Share on Tumblr このエントリーをはてなブックマークに追加

自作JSエディタのテストがてらブログを書いてたら、
Firefoxが落ちた。(3になってからIE6レベルに落ちるようになって困ってます…)

当然textareaにしたためていたブログの内容は消えちゃうわけです。

これはショックということで対策を考えました。

  1. アドオンでsqliteに保存(出来るのか?)
  2. location.hashに保存
  3. cookieに保存

1が出来ればいろんなサイトに使えてよさそうだけど、ハードル高いので今回は除外。
(Jetpackで作れるようになるとありがたいなー)

2は…トリッキーなのでやめときましょう。

まぁ3が妥当ですねー。じゃ、早速。

テキスト圧縮

クッキーの最大サイズは4096バイトらしいので小さくしなくちゃいけません。

そこで、高度な JavaScript 技集からJSでzipできちゃうスーパーライブラリを拝借してきます。

var value = textarea.value;
var data = utf16to8(value);
data = zip_deflate(data);
data = base64encode(data);

とやれば、そこそこサイズを小さくできます。

ちなみに

var data2 = base64decode(data);
data2 = zip_inflate(data2);
data2 = utf8to16(data2);

で戻せます。

Cookieに保存

Cookieへの保存はjquery.cookie.jsで行います。

保存のタイミングはエディタのイベントと合わせてtextarea.onkeyupにします。
(onchangeはJSからの変更の時に発生しないので使ってない)

最後にこれが一番重要ですが、上記の通りcookieにはサイズ制限がありますので、
保存する前に長さをチェックし、(余裕を持たせて)4000バイトより大きければあきらめることにします。

これをまとめると以下のコードになります。

editor.keyup(function() {

	var value = this.value;
	
    	var data = utf16to8(value);
    	data = zip_deflate(data);
     	data = base64encode(data);

	var size = data.length;

	if(size <= 4000) {
		$.cookie('t', data, { 'expires': 1 });
	}
	
	$('#byte').val(size);
	$('#byte2').val(document.cookie.length);
	$('#cookie').val(document.cookie);
	
});

デモはこちらから。

textareaの内容をcookieに保存

以上、どう考えても実用には耐えないと思いますが…。

PR

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
Listed below are links to weblogs that reference
ブラウザが落ちた時textareaの内容が消えちゃうのがショックなので、cookieに保存しておくという無謀な試み from Born Neet

Home > JavaScript > ブラウザが落ちた時textareaの内容が消えちゃうのがショックなので、cookieに保存しておくという無謀な試み

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top