JavaScript localstorage

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);

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

m.ts10806

2022/03/28 08:22

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

int32_t

2022/03/28 08:22

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

miyabi_pudding

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

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

行動規範の内容に同意します

回答2件

もう解決済みみたいですが、書いてしまったので載せておきます。

回答の方向性があっているかどうかわからないのですが

[object Object] の文字が見えたので、疑問を推測して回答してみます。

console.logは、中身を自動で展開して表示してくれるのですが
値を代入する時には、オブジェクトをいれると
[object Object]
という文字列になってしまいます。

document.getElementById("inputreferers").value = 'テストの題名';

とやって、正しく動くことを確認して
その文字列を正しく生成してください。

JSON.parse を行うと、文字列がオブジェクトになっているので、
値を正しく入れるには、自分でオブジェクトを文字列に変換して、文字列を代入する必要があります。

下記のサンプルで実行動作させて、
オブジェクトから文字列を操作する方法を考えて実装してみてください。

js
1const data = {
2  A: "DataA",
3  B: "DataB",
4}
5
6console.log(data);
7// { A: "DataA", B: "DataB" }
8// これは、console.log が勝手に自動変換して中身を見やすいように出力してくれている
9
10console.log(data.toString())
11// "[object Object]"
12// data は toString() すると、このような文字になる
13
14console.log(
15  Object.keys(data).map(key=>`${key}:${data[key]}`).join(', ')
16);
17// "A:DataA, B:DataB"
18// console.logと同じような形式で表示したいなら
19// 自前で、オブジェクトから文字列に変換するコードを書く必要があります

投稿2022/03/29 02:35

standard-soft

総合スコア197

yu.miura

2022/03/29 03:17

ご丁寧に解説いただきましてありがとうございます！文字列がオブジェクトになっているのですね！ JSON.parseで文字列に変換できていると勘違いしておりました。いただいたコードも試していろいろと勉強したいと思います！自力で検索や本を購入して行っておりましたが行き詰まってしまい本当に感謝しております！改めましてありがとうございます！