理系公務員のプログラミング日記

ローカルストレージを操作するのに便利な更新ボタンと削除ボタンを設置する

将来的にデータベースへツイートを保存することを見越して、ローカルストレージにデータを保存していきます。

まず最初に、利便性を考えて画面の更新とローカルストレージの削除をボタンで行えるようにしました。 （後から考えてこうした方が楽だったので、解説では最初に追加してみました。）

localStorage.clear()は、ローカルストレージのデータを全て削除し初期化します。

location.reload()は、現在のページを再読み込みします。

Tweets.vue

<template>
  <div class="form form-group">
    <textarea
      name="form"
      id=""
      class="form-control"
      cols="60"
      rows="5"
      placeholder="いまなにしてる？"
      v-model="TweetObj.tweet_body"
    ></textarea>
    <br />
    <button class="text-white bg-success p-2 m-2 rounded" v-on:click="doTweet">
      ツイートする
    </button>
		<button class="text-white bg-secondary p-2 m-2 rounded" v-on:click="doReload">
      画面を更新する
    </button>
		<button class="text-white bg-danger p-2 m-2 rounded" v-on:click="removeAllTweet">
      全ツイートを削除する
    </button>
  </div>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      TweetObj: {
        tweet_id: 0,
        tweet_user: {
          user_id: "TestId",
          user_name: "ユーザー",
        },
        tweet_body: "",
      },
    };
  },
	props:{
		user:Object,
	},
  methods: {
    doTweet() {
			this.TweetObj.tweet_user = this.user;
      // 値渡しするために、新しいオブジェクトを定義する
      const tweet = Object.assign({}, this.TweetObj);
      this.$emit("tweet-event", tweet);
    },
		doReload(){
			location.reload();
		},
		removeAllTweet(){
      localStorage.clear();
			location.reload();
    }
  },
};
</script>

ローカルストレージにツイートを保存する

ではローカルストレージにツイートを保存していきます。

１つのキーに対してツイートのオブジェクトを１個入れる形にしたいので、tweet_idをキーにします。

これは割とシンプル。

App.vue

  // 略

  methods: {
    // フォームコンポーネントからツイートを受け取った時に動くメソッド
    tweetAction(TweetObj) {
      // ツイートを表示用のコンポーネントに渡す配列に追加
      this.AllTweet.push(TweetObj);
      // ツイートをローカルストレージに保存
      localStorage.setItem(
        // キーを指定（ツイートのidを入れる）
        JSON.stringify(TweetObj.tweet_id),
        // 値を指定（ツイート丸ごと入れる）
        JSON.stringify(TweetObj)
      );
    },
  // 略
  },

画面の更新時にローカルストレージからツイートを取り出す。

App.vueで保存されているデータを画面のロード時に呼び出して、AllTweet配列に追加します。

画面のロード時に呼び出したいので、App.vueのcreatedまたはmountedの中で呼び出します。

この２つは実行されるタイミングが違いcreatedの方が先に行われます。そのため、アクセスできるデータに違いがあります。

• created・・・propsやcomputedにアクセスできるがDOMにアクセスできない。
• mounted・・・created＋DOMにアクセスできる。

今回は、DOMに関係したデータではないので、createdで定義してみました。

App.vue

  // 略
  created() {
    for (let i = 1; i < localStorage.length; i++) {
      this.AllTweet.push(JSON.parse(localStorage.getItem(i)));
    }
  },

  // 略

これでロード時にローカルストレージの情報を読み取れるようになったのですが、バグがあります。

その解消は次回に行っていきます。