javaScript storage格納について、格納データを消した時のlengthの動き

Question

HTML、javascript、cssでメモ帳を作成しようとしています。
そこでjsのstorageを使ったデータ格納を考えています。

調べた結果、
length …… 保存されているデータの数を返す
key(n) …… 保存されているn番目のkeyを返す
getItem(key) …… keyに対応するvalueを取得する
setItem(key, value) …… keyとvalueのペアでデータを保存する
removeItem(key) …… keyに対応するvalueを削除する
clear() …… データをすべてクリアする

ここまで理解しました。

ここから質問、
例えば5つのデータが格納されてたとする
0個目から格納されるので
番号 キー 内容
0 キー１ 内容１
1 キー２ 内容２
2 キー３ 内容３
3 キー４ 内容４
4 キー５ 内容５
になります。

そこで
removeItem(キー３)で内容３を削除した場合
どうなりますか？

候補１ キーとともに消滅、番号は残る
番号 キー 内容
0 キー１ 内容１
1 キー２ 内容２
2 × ×
3 キー４ 内容４
4 キー５ 内容５

候補2 内容のみ残る
番号 キー 内容
0 キー１ 内容１
1 キー２ 内容２
2 キー３ ×
3 キー４ 内容４
4 キー５ 内容５

候補3 キーとともに消え、自動で番号がずれる
番号 キー 内容
0 キー１ 内容１
1 キー２ 内容２
2 キー４ 内容４
3 キー５ 内容５

キーも削除されるのでしょうか？

そして、削除されない場合、
clear()コマンド以外にキーを削除する方法はないのでしょうか？

また削除した場合、
番号振りはどのようになるのでしょうか？

これ次第によって、storage.lengthによって取得できる範囲が変わるので、削除するごとに格納番号を変更せざる負えません、自力で調べようと思いましたが、やり方が思いつかず、できればstorage内の順番および番号と配列を確認できる方法も教えてもらいたいです。
なおネットに上がっていたこのコードでは内部でしか確認できない番号が分かりません。

function show1() {
  var result = "";
  for(var i=0; i<storage.length; i++){
    var k = storage.key(i);
    result += k + "：" + storage.getItem(k) + "<br>";
  }
  document.getElementById("show1").innerHTML = result;
}

Answer 1

これ次第によって、storage.lengthによって取得できる範囲が変わるので、削除するごとに格納番号を変更せざる負えません、自力で調べようと思いましたが、やり方が思いつかず、できればstorage内の順番および番号と配列を確認できる方法も教えてもらいたいです。

Storage はキーの順序は保障されません。ブラウザごとに挙動が変わる可能性があります。

【Storage.key() - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Storage/key

キーの順序はユーザエージェント依存であり、この順序に頼るべきではありません。

---

なおネットに上がっていたこのコードでは内部でしか確認できない番号が分かりません。

デベロッパーツールで内容の確認は可能です。（Firefoxの場合デベロッパーツールの設定から「ストレージ」を選ばないと表示されなかったはず）
ただ、前述の通りキーの順序は保障されないため、順序がブラウザによって違う事も可能性としてはあります。（なので順序が保たれる前提でプログラムをしてはいけない）

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

---

どのようなコードを書かれるかによりますが、順番の保障が必要であれば配列を使い、Storage には JSON.stringify( array ) を値として入れ、使用するときに JSON.parse( value ) として配列に戻すのが良いと思います。

【Array - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

【【JavaScript】JSONのparseとstringifyメソッドの使い方 - TASK NOTES】
http://www.task-notes.com/entry/20160719/1468858991

Comments

[FLY2525]

なるほど、順序を大切にする理由はありませんが
後々メモ帳の順序を変える機能を加えたいのでstorageを使ったデータ保存は難しそうです。なのでJSONの使い方を調べて作ってみることにしますね。
回答ありがとうございました。