質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

4368閲覧

localStorage.setItemのkeyの値が上書きされてしまう

HaTea

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/05 12:10

前提・実現したいこと

jqueryのdatatablesから「選手データを取得」ボタンを押すと選択した値を取得する様にしました。
そして、そのデータをローカルストレージに保存しました。
しかし、localStorage.setItemで保存しようとするとkeyの値が上書きされてしまい。
最後に取得した選手データしか保存出来ません。全て保存したいです。

該当のソースコード

html

1 <ol id="base-list"> 2 </ol> 3 <button id="clear">clear</button> 4 <table id='base-table' class="table table-bordered"> 5 <thead> 6 <tr><th>選手</th>{%- for i in players_columns %}<th>{{ i|e }}</th>{%- endfor %}</tr> 7 </thead> 8 <tbody> 9 {%- for i in players_values %} 10 <tr><th>{{ players_index[loop.index0]|e }}</th>{% for j in i %}<td>{{ j|e }}</td>{% endfor %}</tr> 11 {%- endfor %} 12 </tbody> 13 </table> 14 <script> 15 $(document).ready(function() { 16 var table = $('#base-table').DataTable( { 17 dom: 'Bfrtip', 18 select: true, 19 buttons: [ 20 { 21 text: '選手データ取得', 22 action: function () { 23 var data = table.rows( { selected: true } ).data(); 24 localStorage.setItem('key',data[0].slice(0)) 25 $("#base-list").append(`<li>${data[0].slice(0)}</li>`); 26 } 27 } 28 ] 29 } ); 30 } ); 31 var player = document.getElementById('base-list'); 32 if (null != localStorage.getItem('key')){ 33 player.innerHTML = `<li>${localStorage.getItem('key')}</li>`; 34 } 35 document.getElementById('clear').addEventListener('click', function(){ 36 localStorage.clear(); 37 }) 38</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

同じkeyにそのまま複数のものは入れられないので、keyを毎回変えるか、配列で管理してそれをJSONにして保存するとか、別の方法を考えましょう。

【localStorageで複数のデータを保存する | Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

投稿2020/07/05 12:20

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HaTea

2020/07/05 13:39

ご回答ありがとうございます。 keyの変更を試したいと思います。 JSONは勉強できていない範囲なので、しっかり勉強してから実装したいと思います。
guest

0

ベストアンサー

keyに一意な情報(IDとかINDEXとか)をつければ良いのではないでしょうか?
それが、データ全てJSON文字列にして保管しておくとか。
もしかしたら本件はIndexedDBのほうが向いてるかもしれません。

投稿2020/07/05 12:17

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HaTea

2020/07/05 13:37

ご回答ありがとうございます。 まだ調べられていない所もありました。 色々試してみたいと思います。
m.ts10806

2020/07/05 13:39

できれば「解決済み」とする場合は、実際に検証して試して理解して「解決してから」にしてもらえればと思います。 後から見た人が「結局どう解決したの?」が分かりませんので
HaTea

2020/07/05 14:11

了解しました。これから気を付ける様にします。 また解決出来た際には、自己解決方法に記載します。
m.ts10806

2020/07/05 14:21

どうされるかは、任せますが「質問を受付中に戻す」ということは可能です。 ※質問したことはないので場所ややり方等詳しい説明は出来ないのですが、それで外してもらったことは何度もあります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問