読者です 読者をやめる 読者になる 読者になる

Silverlight から HTML5 の WebStorage を使う方法

.net

はじめに

Silverlight の不満の1つに、「クライアントデータベースが無いこと」がある。Silverlight には System.Data が無いので、SQLite*1SQL Server CE は使えない。

また、Microsoft は Silverlight のランタイムのサイズを気にしているみたいなので、将来クライアントデータベースが追加されることは期待できそうにない。

そこで閃いた

Silverlight にクライアント DB が無いなら、HTML5 の WebStorage を使えばいいじゃない。」

やり方は簡単

まず、Silverlight をホストしている HTML ページに、JavaScript で WebStorage を操作する関数を記述する。

var storage = window.localStorage;

function setWebStorage(key, value) {
    if (storage) {
        storage.setItem(key, value);
    }
}

function getWebStorage(key, value) {
    if (storage == null) {
        throw new Error("WebStorage は使えません。");
    }
    return storage.getItem(key);
}

これらの関数を Silverlight の HTML ブリッジを使って呼び出せばいい。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Browser;
namespace WebStorageSample
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void SaveWebStorage(object sender, RoutedEventArgs e)
        {
            HtmlPage.Window.Invoke("setWebStorage", "test_key", this._textBox.Text);
        }

        private void LoadWebStorage(object sender, RoutedEventArgs e)
        {
            this._textBox.Text = HtmlPage.Window.Invoke("getWebStorage", "test_key") as string;
        }
    }
}

Google Chrome で動作確認したら、すんなり上手く行った。

今回は文字列だったけど、オブジェクトの場合は XML や JSON にシリアル化して保存すればよさそう。個人的に、分離ストレージを使うより楽。

まとめ

HTML5 対応の Web ブラウザが普及すれば結構使える手法では?

分離ストレージ用の Key/Value ストアを自作してもいいけど、既に Web ブラウザが提供しているんだから、それを使わない手はない。

WebDatabase も同じような方法で、Silverlight から使えるはず。WebStorage よりかなり面倒だけどね。

*1:SQLiteSilverlight で使えるようにハックした強者はいるみたい。http://d.hatena.ne.jp/terurou/20100326/1269533196