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

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

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

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

解決済

JavaScript localstorage

yu.miura
yu.miura

総合スコア3

JavaScript

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

2回答

0評価

1クリップ

416閲覧

投稿2022/03/28 08:19

編集2022/03/29 14:25

localstorageからinputタグのidに代入したい
オブジェクトなのでJSON.stringifyとJSON.parseは行っている。
console.logで確認してみるとちゃんと表示されている
inputタグのidに代入するとobjectと表示されてします。

console.logでは写真のように表示
イメージ説明

document.getElementById("inputreferers").value = favsAll ;
上記のようにvalueで表示している
イメージ説明

読み込みの順番がいけないのか
そもそも呼び方が間違っているのかがわからない状況です。

是非ご教授いただけないでしょうか。
よろしくお願いいたします。

一括資料請求をwordpressで制作したいです。
検索するなかで下記のコードが使用出来そうでしたので使用しております。

操作しても希望の通り
クリックするとlocalstorageに保存されていまます。

<div id="app"> <div class="container"> <div class="row" v-if="!isLs"> <div class="col"> <div class="alert alert-warning"> お使いのブラウザではlocalStrage機能は使用できません。 </div> </div> </div> <div class="row py-3"> <div class="col"> <h1>お気に入り登録</h1> <div>ただいまのお気に入り登録件数は<strong class="display-4 font-weight-bold">{{ favs.length }}</strong>件です。<br> <a href="http://test.local/contact/#wpcf7-f24-p32-o1">お気に入り一覧を見る</a> </div> </div> </div> <div class="row border-top py-3 align-items-center" v-for="item in data" :key="item.id"> <div class="col"> <h3>{{ item.name}}</h3> <div> {{ item.detail}} </div> </div> <div class="col-auto"> <button class="btn" :class="isFavs(item.id) ?'btn-secondary' : 'btn-primary'" v-on:click="toggleFavs($event,item.id)"> <template v-if="isFavs(item.id)"> <img src="http://test.local/wp-content/uploads/2022/03/search_list_apply_check_on.png" alt=""> </template> <template v-else=""> <img src="http://test.local/wp-content/uploads/2022/03/search_list_apply_check_off.png" alt=""> </template> </button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { isLs: false, favs: [], data: [{ id: 1, name: 'テスト1', }, { id: 2, name: 'テスト2', }, { id: 3, name: 'テスト3', }, { id: 4, name: 'テスト4', }, { id: 5, name: 'テスト5', }, { id: 6, name: 'テスト6', }, { id: 7, name: 'テスト7', }, { id: 8, name: 'テスト8', }, { id: 9, name: 'テスト9', }, { id: 10, name: 'テスト10', } ] } }, computed: { //お気に入り登録済みかどうか判定 isFavs() { var vm = this; return function (id) { var index = vm.favs.findIndex(function (val) { return val.id == id; }) if (index === -1) { return false; } else { return true; } } } }, mounted() { var vm = this; vm.init(); //localStrageが使えるかどうかの判定 if (vm.isLs) { //保存済みのlocalStrageを読み込む var current = window.localStorage.getItem('favs'); if (current) { vm.$set(vm, 'favs', JSON.parse(current)) } } }, methods: { init() { var vm = this; if (typeof window.localStorage !== 'undefined') { vm.$set(vm, 'isLs', true) } }, toggleFavs($event, id) { var vm = this; //お気に入り対象がどの物件か抽出 var index = vm.data.findIndex(function (val) { return val.id == id; }); var target = vm.data[index]; //既に登録済みか判定 var index = vm.favs.findIndex(function (val) { return val.id == target.id; }) //見つからなければ新規登録 if (index === -1) { vm.favs.unshift(target) } else { //見つかれば削除 vm.favs.splice(index, 1); } //localStrageに保存 window.localStorage.setItem('favs', JSON.stringify(vm.favs)); } } }) </script>**ボールドテキスト**

保存できているので下記のコードを書いて表示しようとしています。

let inputers = document.getElementById('inputreferers') let favsAll = JSON.parse(localStorage.getItem('favs')); console.log(favsAll); document.getElementById("inputreferers").value = favsAll ;

お問い合わせはcontactform7を使用して下記コードをいれて
データを私自身に送信させていです。

<input type="text" name="referer" id="inputreferer">

contactform7に下記のコードを入れても違うタブになるのか
使用できませんと表示されてしまう

そのためlocalstorageにはちゃんと保存されているので
データだけ文字化して何を選択されてかわかるようにしたい

<div id="app"> <div class="container"> <div class="row" v-if="!isLs"> <div class="col"> <div class="alert alert-warning"> お使いのブラウザではlocalStrage機能は使用できません。 </div> </div> </div> <div class="row py-3"> <div class="col"> <h1>お気に入り一覧</h1> <div>ただいまのお気に入り登録件数は<strong class="display-4 font-weight-bold">{{ favs.length }}</strong>件です。 </div> </div> </div> <div class="row border-top py-3 align-items-center" v-for="item in favs" :key="item.id"> <div class="col"> <h3>{{ item.name}}</h3> <div> {{ item.detail}} </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { isLs: false, favs: [], } }, mounted() { var vm = this; vm.init(); //localStrageが使えるかどうかの判定 if (vm.isLs) { //保存済みのlocalStrageを読み込む var current = window.localStorage.getItem('favs'); if (current) { vm.$set(vm, 'favs', JSON.parse(current)) } } }, methods: { init() { var vm = this; if (typeof window.localStorage !== 'undefined') { vm.$set(vm, 'isLs', true) } } } }) </script>

ちなみにcontactform7に上記のコードを書いても使用できないとなりますが
固定ページに上記のコードをいれるとちゃんと表示されます。

※結果として現在localstorageに保存できているため
その文字列を私自身に送信したいです。
しかしobject表示になっていることが現実です。

使用予定イメージ
使用される方には選択したものを表示(現在できている)
同じページにcontactform7のショートコートを入れる
localstorageから取得して選択してものを表示
※きれいに表示できれば表示して見た目がわるければ非表示にしてデータだけわかるようにする

現在localstorageに保存しているnameだけ取得するために下記コードをいれてもundefinedになるため
全部取得にしている(その場合はちゃんと取得して表示される)

let favsAll = JSON.parse(localStorage.getItem('favs')); console.log(favsAll.name);

すいません長くなりましたが現状でございます。
もし説明が足りない場合は申し訳ございませんがおしゃっていただければと思います。
何卒よろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2022/03/28 08:22

写真って反射する情報からもいろいろ取れるので、画面キャプチャに差し替えたうえで、 運営に削除依頼されたほうが良いと思います。 また、実際のコードも提示してください。
int32_t

2022/03/28 08:22

コードを見ないで助言するのは困難なので、コードを開示してください。
miyabi_takatsuk

2022/03/28 08:25

input[type="text"]には、何を入れたいのでしょうか?
yu.miura

2022/03/28 09:01

一括資料請求をwordpressで制作したいです。 検索するなかで下記のコードが使用出来そうでしたので使用しております。 操作しても希望の通り クリックするとlocalstorageに保存されていまます。 ```ここに言語を入力 <div id="app"> <div class="container"> <div class="row" v-if="!isLs"> <div class="col"> <div class="alert alert-warning"> お使いのブラウザではlocalStrage機能は使用できません。 </div> </div> </div> <div class="row py-3"> <div class="col"> <h1>お気に入り登録</h1> <div>ただいまのお気に入り登録件数は<strong class="display-4 font-weight-bold">{{ favs.length }}</strong>件です。<br> <a href="http://test.local/contact/#wpcf7-f24-p32-o1">お気に入り一覧を見る</a> </div> </div> </div> <div class="row border-top py-3 align-items-center" v-for="item in data" :key="item.id"> <div class="col"> <h3>{{ item.name}}</h3> <div> {{ item.detail}} </div> </div> <div class="col-auto"> <button class="btn" :class="isFavs(item.id) ?'btn-secondary' : 'btn-primary'" v-on:click="toggleFavs($event,item.id)"> <template v-if="isFavs(item.id)"> <img src="http://test.local/wp-content/uploads/2022/03/search_list_apply_check_on.png" alt=""> </template> <template v-else=""> <img src="http://test.local/wp-content/uploads/2022/03/search_list_apply_check_off.png" alt=""> </template> </button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { isLs: false, favs: [], data: [{ id: 1, name: 'テスト1', }, { id: 2, name: 'テスト2', }, { id: 3, name: 'テスト3', }, { id: 4, name: 'テスト4', }, { id: 5, name: 'テスト5', }, { id: 6, name: 'テスト6', }, { id: 7, name: 'テスト7', }, { id: 8, name: 'テスト8', }, { id: 9, name: 'テスト9', }, { id: 10, name: 'テスト10', } ] } }, computed: { //お気に入り登録済みかどうか判定 isFavs() { var vm = this; return function (id) { var index = vm.favs.findIndex(function (val) { return val.id == id; }) if (index === -1) { return false; } else { return true; } } } }, mounted() { var vm = this; vm.init(); //localStrageが使えるかどうかの判定 if (vm.isLs) { //保存済みのlocalStrageを読み込む var current = window.localStorage.getItem('favs'); if (current) { vm.$set(vm, 'favs', JSON.parse(current)) } } }, methods: { init() { var vm = this; if (typeof window.localStorage !== 'undefined') { vm.$set(vm, 'isLs', true) } }, toggleFavs($event, id) { var vm = this; //お気に入り対象がどの物件か抽出 var index = vm.data.findIndex(function (val) { return val.id == id; }); var target = vm.data[index]; //既に登録済みか判定 var index = vm.favs.findIndex(function (val) { return val.id == target.id; }) //見つからなければ新規登録 if (index === -1) { vm.favs.unshift(target) } else { //見つかれば削除 vm.favs.splice(index, 1); } //localStrageに保存 window.localStorage.setItem('favs', JSON.stringify(vm.favs)); } } }) </script>**ボールドテキスト** ``` 保存できているので下記のコードを書いて表示しようとしています。 ```ここに言語を入力 let inputers = document.getElementById('inputreferers') let favsAll = JSON.parse(localStorage.getItem('favs')); console.log(favsAll); document.getElementById("inputreferers").value = favsAll ; ``` お問い合わせはcontactform7を使用して下記コードをいれて データを私自身に送信させていです。 ```ここに言語を入力 <input type="text" name="referer" id="inputreferer"> ``` contactform7に下記のコードを入れても違うタブになるのか 使用できませんと表示されてしまう そのためlocalstorageにはちゃんと保存されているので データだけ文字化して何を選択されてかわかるようにしたい ```ここに言語を入力 <div id="app"> <div class="container"> <div class="row" v-if="!isLs"> <div class="col"> <div class="alert alert-warning"> お使いのブラウザではlocalStrage機能は使用できません。 </div> </div> </div> <div class="row py-3"> <div class="col"> <h1>お気に入り一覧</h1> <div>ただいまのお気に入り登録件数は<strong class="display-4 font-weight-bold">{{ favs.length }}</strong>件です。 </div> </div> </div> <div class="row border-top py-3 align-items-center" v-for="item in favs" :key="item.id"> <div class="col"> <h3>{{ item.name}}</h3> <div> {{ item.detail}} </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data() { return { isLs: false, favs: [], } }, mounted() { var vm = this; vm.init(); //localStrageが使えるかどうかの判定 if (vm.isLs) { //保存済みのlocalStrageを読み込む var current = window.localStorage.getItem('favs'); if (current) { vm.$set(vm, 'favs', JSON.parse(current)) } } }, methods: { init() { var vm = this; if (typeof window.localStorage !== 'undefined') { vm.$set(vm, 'isLs', true) } } } }) </script> ``` ちなみにcontactform7に上記のコードを書いても使用できないとなりますが 固定ページに上記のコードをいれるとちゃんと表示されます。 ※結果として現在localstorageに保存できているため その文字列を私自身に送信したいです。 しかしobject表示になっていることが現実です。 使用予定イメージ 使用される方には選択したものを表示(現在できている) 同じページにcontactform7のショートコートを入れる localstorageから取得して選択してものを表示 ※きれいに表示できれば表示して見た目がわるければ非表示にしてデータだけわかるようにする 現在localstorageに保存しているnameだけ取得するために下記コードをいれてもundefinedになるため 全部取得にしている(その場合はちゃんと取得して表示される) ```ここに言語を入力 let favsAll = JSON.parse(localStorage.getItem('favs')); console.log(favsAll.name); ``` すいません長くなりましたが現状でございます。 もし説明が足りない場合は申し訳ございませんがおしゃっていただければと思います。 何卒よろしくお願いいたします。
yu.miura

2022/03/28 09:05

質問に回答するとコードがわからないため 質問メインに追加いたしました。 お手数おかけいたしますがよろしくお願いいたします。
Lhankor_Mhy

2022/03/28 09:24

このコードは何をしたい感じですか?
yu.miura

2022/03/28 09:42

一括資料請求サイトを制作したいです。 現在のコードでクリックするとlocalstorageにデータを保存できているのですが インプットタグのidに代入すると文字にならずobjectとなっております。 代入しても文字になって送信されることを希望しております。 情報がたくさんあり わかりづらくなってしまい申し訳ございません。
Lhankor_Mhy

2022/03/28 09:45

なにをフォームに出力したい感じですか? そのあたりが伝わってこないんですが。 テスト1とかを出力したいんですか?
yu.miura

2022/03/28 09:55

おっしゃる通りテスト1を出力させていです。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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