Webアプリケーションを公開するまでのつぶやき 10

プロローグはこちら↑。

お気に入り保存

前回作った最寄り図書館リストの☆のボタンをタップしたら、お気に入りを保存する機能を作りたいと思います。
データの保存先はlocalStrageにしょうと思います。

    methods: {
      onClickFavorite(library: Library) {
        
      }
    }

こんなメソッドを用意して

<div @click="onClickFavorite(library)"><img class="float-right w-8 h-8" src="../assets/icon/favorite_outline.png"/></div>

☆のアイコンにクリックイベントをつけます。

localStrageについてはこちらの記事を参考にしました。

Vue3で使うlocalStorage - Qiita

localStrageはたまに勝手に消えるとか書いてあって不穏です。
保存できるのは文字列だけのようですが、json形式にして文字列として保存すれば配列とかもいけるようなのでその手法でデータを保存してみようと思います。

お気に入り

こんな感じ。

保存。

localStorage.setItem("favorite_libralies", JSON.stringify([librarys]));

取得。

    let data = localStorage.getItem("favorite_libralies") ?? "";
    const favorites = JSON.parse(data);

もっと便利に

• お気に入りしたら星に色を付ける

• 保存済みの図書館は表示時に星に色を付ける

• 保存時は保存済みのリストに追加して保存する

• お気に入りリストの削除ができるようにする

などなど、やりたい事が沢山あるのでコツコツ実装していこうと思います。

お気に入り図書館の星に色付け

星を黄色に

えっ、見づらい。
どうしよう。。。

色変えました

星の色を変えてみました。
完全なる黄色ではなくgold的な黄色。

タップした時に星に色をつける

const favorites = ref(JSON.parse(data) as Array<Library>);

favoriteもrefにして、

      onClickFavorite(library: Library) {
        this.favorites.push(library);
        localStorage.setItem("favorite_libralies", JSON.stringify(this.favorites));
      }

タップされた時に関数でfavoriteを更新。

            <div @click="onClickFavorite(library)">
              <img v-if="favorites.map((e) => e.libid).includes(library.libid)" class="float-right w-8 h-8" src="../assets/icon/favorite.png"/>
              <img v-else class="float-right w-8 h-8" src="../assets/icon/favorite_outline.png"/>
            </div>

星のアイコンはこんな感じ。
favoriteが更新されるとここも再描画されるようになり、タップで色が変わるようになりました。

お気に入りリストの削除

お気に入り削除

リストの右上にゴミ箱アイコンを追加。
ここをタップで削除ができます。

    onClickDelete(favorite: Library) {
      let result = this.favorites.filter((e) => e !== favorite);
      this.favorites = result;
      localStorage.setItem("favorite_libralies", JSON.stringify(this.favorites));
    }

deleteの実装はこんな感じ。

お気に入りの追加、削除ができました。
今回はここまでです。

次回は図書館の位置情報を地図アプリで開けるようにしていこいうかと思います。

ここまで読んで下さってありがとうございます！