canvasにて他ページで取得したtoDataURLの再利用

Question

ページ１で取得したcanvasデータをページ２で使用したいのですがうまくいきません。同一ブラウザ、Chromeです。

<canvas id="render" width="0" height="0"></canvas>
<img src="#" id="i1" width="73" height="72"><br>
<button onclick="CanvasToImg()">src属性にコピー</button>

//canvasからデータを取り出してimgのsrc属性にコピーする
function CanvasToImg(){
    //canvas(c1)のノードオブジェクト
    var canvas = document.getElementById('render');
    
    //toDataURLでデータを取得
    var imgdata = canvas.toDataURL();
    
    //imgタグのsrc属性に
    document.getElementById("i1").src = imgdata;
}

ここまでページ１内でうまくいきます。
ブラウザ上のローカルストレージにimgdataとして保存されているのかと思い、ページ１でスクリプトを実行した直後にページ２でスクリプトを走らせましたがうまくいかず。

以下ページ２で

<img src="#" id="i1" width="73" height="72">
<button onclick="imgToImg()">クリックすると描画</button>

function imgToImg(){
    //imgタグのsrc属性にローカル保存情報を受け入れ
    document.getElementById("i1").src = imgdata;
}

としましたが、ncaught ReferenceError: imgdata is not definedエラーが出てうまく動きません。
ページ１，２は現在は異階層、ゆくゆくは同一階層で運用します。
すべてローカルのみで完結させたいです。

最終的にはimgDateにしないでページ１のcanvasからページ２のcanvasに直で移行したいと思っていますがひとまず勉強と思って遠回り中（？）です。

以上アドバイスいただけないでしょうか。よろしくお願いします。

Answer 1

imgdataは単なるローカル変数なので、関数を抜けた瞬間に無効となります。localStorageを使いたいなら、明示的にアクセスする必要があります。

// ページ1の側
localStorage.setItem('imgdata', canvas.toDataURL());

// ページ2の側
document.getElementById("i1").src = localStorage.getItem('imgdata');

Comments

[kihokutarou]

なるほど、そうかそうか。
ローカル変数というところには疑問があり関数外で宣言したりと試しましたがlocalstorageという関数があったのですね。
助かりました。ありがとうございます。