Case1
前回の続きとおさらい
CHECK
01
前回作った会話アプリのコードを上から、1行ずつ解読していきます。
CHECK
02
知っておかないといけない単語集
オブジェクト
複数の変数をまとめたもの
{ } で囲まれたもの
引数
関数に渡す値のこと
メソッド
特定の処理をまとめたプログラムの塊のこと
配列
複数のデータを順番に並べた構造のこと []で囲む
0から始まる
JSON
JavaScript Object Notationの略
JavaScriptのオブジェクトの書き方を元にしたデータ定義方法
構造化データ
Case2
ウェブストレージAPIを用いて、画面をリロードしても会話の内容が保存されて消えないようにする機能を実装する。
CHECK
01
ウェブストレージAPI
ブラウザでキーと値のペアを保存・取得するための仕組みです。
Cookie を使用する方法よりも直観的であると言われています。
【特徴】
サーバーではなく、個々の端末にデータを保存できる。
オフラインでも Web メールを保存したり、ブラウザだけでアプリケーションを作ったりできる。
名前とそれに対応する値からなる、より小さなデータ項目を格納できる。
【機能】
どのくらいのスペースを使用できるかや、すでにどのくらいのスペースを使用しているかを調べることができる。
ユーザーエージェントが他のもののための場所を空けるためにサイトデータを処分する前に、警告する必要があるかどうかを制御できる。
保存されているデータアイテムを追加、変更、削除できる。
＊COMMENT＊
則岡 えり
＊コメント＊
今回は前回作った会話アプリに、履歴を表示する機能を追加しました。
「ウェブストレージAPI」というものを使って、ブラウザを閉じたりリロードしても履歴が消えないようにしました。
以前に「サイトに初回アクセスした時のみローディングアニメーションを表示させる」という内容のJSを見たことがあり、その時はよくわかりませんでしたが、これを使っていたのかと繋がって嬉しくなりました。
また、検証ツールで実際に保存されている内容が目で見えるのも新鮮でした。
私はまだまだchatGPTに助けてもらわないと全然コードを書けませんが
ブラウザに保存できるこの機能を使って、他に何かできるかなーと考えるだけで楽しいです。
＊コメント＊
＊コメント＊