JavaScriptに追記 WebStorage自動保存、呼び出し

Question

<script type="text/javascript"> var Pattern1 = [ { 'src1':'btn1.png', 'src2':'img1.png' }, { 'src1':'btn2.png', 'src2':'img2.png' }, { 'src1':'btn3.png', 'src2':'img3.png' }, { 'src1':'btn4.png', 'src2':'img4.png' }, { 'src1':'btn5.png', 'src2':'img5.png' }, ]; function setPattern1(ID1){ ID1 %= Pattern1.length; curPattern1 = ID1; document.getElementById('BTN').src = Pattern1[ ID1 ].src1; document.getElementById('IMG').src = Pattern1[ ID1 ].src2; } var curPattern1 = 0;setPattern1( curPattern1 ); </script>

ボタン（btn○.png）と写真（img○.png）があり、
ボタンを押すとボタンと写真が順に切り替わりループするスクリプトです。
写真を切り替えたら、その状態を自動で保存し、再度訪問した時に自動で読み込む。
という機能をWebStorageを使って作りたいのですが、
どのように記述すればよいでしょうか？

Answer 1

var Pattern1 = [
  { 'src1':'btn1.png', 'src2':'img1.png' },
  { 'src1':'btn2.png', 'src2':'img2.png' },
  { 'src1':'btn3.png', 'src2':'img3.png' },
  { 'src1':'btn4.png', 'src2':'img4.png' },
  { 'src1':'btn5.png', 'src2':'img5.png' },
];

function setPattern1(ID1){
  ID1 %= Pattern1.length; 
  curPattern1 = ID1;
  document.getElementById('BTN').src = Pattern1[ ID1 ].src1;
  document.getElementById('IMG').src = Pattern1[ ID1 ].src2;

  if(localStorage){
    localStorage.setItem('ID1', ID1);
  }
}

var curPattern1 = 0;

if(localStorage && localStorage.getItem('ID1')){
  curPattern1 = parseInt(localStorage.getItem('ID1'));
}

setPattern1( curPattern1 );

こんな感じでどうでしょう

if(localStorage...)云々が書いてあるところが追加ポイントです
WebStorageはとても便利なんですが、ブラウザによってはローカル環境だと動作しない（localhostでもいいのでサーバ経由でアクセスしないとだめ）という罠があったりするので開発中は気をつけてください

Comments

[boutarou]

回答ありがとうございます。
やってみましたがうまくいきませんでした。
リロードしたり再訪問すると初期状態に戻ってしまいます。

[khirose]

ボタンを押して切り替えということですが、押したときにsetPattern1()を呼ぶようにしてます？

[boutarou]

ボタン
"<p class=SRC1><input id=BTN type=image onclick=setPattern1(curPattern1+1) src=btn1.png></p>"

写真
"<p class=SRC2><img id=IMG src=img1.png></p>"

と記述しています。
src=で指定してしまってるのがいけないんでしょうか？