day05 ローカルストレージ、ウィンドウオブジェクト

記事ディレクトリ

- Web API - Day 5 ノート

Web API - Day 5 ノート

目標: JS を使用してブラウザを操作できるようになり、ローカルストレージを使用して学生の雇用形態を実現できるようになる

BOM 操作
総合案件

1js構成

JavaScript の構成

ECMAスクリプト:
- jsの基本文法の核となる知識を規定しています。
- 例: 変数、分岐ステートメント、ループステートメント、オブジェクトなど。
Web API :
- HTML ドキュメントを操作するための一連の API を定義する DOM Document Object Model
- BOM ブラウザーオブジェクトモデルは、ブラウザーウィンドウを操作するための一連の API を定義します (BOM 領域は DOM 領域よりも大きくなります)。

[外部リンクの画像転送に失敗しました。ソースサイトにアンチリーチングメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-5PvWN8kN-1680687479434)(assets/1676047389456.png)]

2.窓オブジェクト

BOM (Browser Object Model) はブラウザオブジェクトモデルです。

window オブジェクトはグローバルオブジェクトであり、JavaScript の最上位オブジェクトとも言えます。
document、alert()、console.log() と同様に、これらはすべて window のプロパティであり、基本 BOM のプロパティとメソッドはすべて window のプロパティです。
var を介してグローバルスコープで定義されたすべての変数と関数は、window オブジェクトのプロパティとメソッドになります。
ウィンドウオブジェクトの下でプロパティとメソッドを呼び出すときにウィンドウを省略できます

[外部リンクの画像の転送に失敗しました。ソースサイトにはリーチング防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-7lIAIiSy-1680687479436)(assets/1676047436362.png)]

2.1 タイマーディレイ機能

文法：

setTimeout(回调函数, 延迟时间)

setTimeout は 1 回だけ実行されるため、通常はウィンドウ
間欠関数 setInterval: を省略して、コードの実行を遅らせると理解できます。通常は、ウィンドウ
クリア遅延関数を省略します。

clearTimeout(timerId)

注意点

遅延関数は待機する必要があるため、次のコードが最初に実行されます

戻り値は正の整数で、タイマーの数を示します

  <script>
    // 定时器之延迟函数
    // 1. 开启延迟函数
    let timerId = setTimeout(function () {
      
      
      console.log('我只执行一次')
    }, 3000)
    // 1.1 延迟函数返回的还是一个正整数数字，表示延迟函数的编号
    console.log(timerId)
    // 1.2 延迟函数需要等待时间，所以下面的代码优先执行
    // 2. 关闭延迟函数
    clearTimeout(timerId)
  </script>

2.2jsの実行メカニズム

イベントループevenloopは、
最初に実行スタック同期タスクを実行し、非同期タスクをタスクキューに入れ、ブラウザは同期タスクの実行後に非同期タスクが実行されることを観測します（非同期タスクが読み込まれた後、実行スタックで実行されます)

js シングルスレッド (同時に処理されるのは 1 つだけ)
お待ちいただく方は一時飛ばしてください
解決基準:
- 同期: 前のタスクが終了し、次のタスクが開始され、プログラムの実行順序がタスクの配置順序と一致する
- 非同期: 現在のタスクと他のタスクが一緒に実行される理由
- 同期タスク: メインスレッドが実行され、実行スタックが形成されます。
- 非同期タスク: 非同期関連のタスクがタスクキューに追加されます
一般的な非同期タスク
- 一般的なイベント: サイズ変更のクリック
- リソースの読み込み: 読み込みエラー
- タイマー: setInterval setTimeout
解決：

console.log(1)
    console.log(2)
    setTimeout(function () {
    
    
      console.log(3)
    }, 0)
    console.log(4);  //输出结果 1243

2.3 位置オブジェクト

location (アドレス) URL アドレスのさまざまなコンポーネントを分割して保存します。オブジェクトであり、window に属し、window は省略できます。

プロパティ/メソッド	例証する
href	属性、完全な URL アドレスを取得し、それを使用して値を割り当てるときにアドレスにジャンプします
検索	属性、フォーム、シンボルのジャンプアドレスで運ばれるパラメータを取得しますか? 背中部分
ハッシュ	属性、アドレスの値を取得、シンボルの後ろの部分 #
リロード()	現在のページを更新するために使用されるメソッド。パラメータ true が渡された場合、強制更新を意味します

<body>
  <form>
    <input type="text" name="search"> <button>搜索</button>
  </form>
  <a href="#/music">音乐</a>
  <a href="#/download">下载</a>

  <button class="reload">刷新页面</button>
  <script>
    // location 对象  
    // 1. href属性 （重点） 得到完整地址，赋值则是跳转到新地址
    console.log(location.href)
    // location.href = 'http://www.itcast.cn'

    // 2. search属性  得到 ? 后面的地址 
    console.log(location.search)  // ?search=笔记本

    // 3. hash属性  得到 # 后面的地址
    console.log(location.hash)

    // 4. reload 方法  刷新页面
    const btn = document.querySelector('.reload')
    btn.addEventListener('click', function () {
      
      
      // location.reload() // 页面刷新
      location.reload(true) // 强制页面刷新 ctrl+f5
    })
  </script>
</body>

2.4 ナビゲーターオブジェクト

Navigator は、ブラウザ自体の関連情報を記録するオブジェクトです

一般的な属性とメソッド:

userAgent を介してブラウザーのバージョンとプラットフォームを検出する

// 检测 userAgent（浏览器信息）
(function () {
    
    
  const userAgent = navigator.userAgent
  // 验证是否为Android或iPhone
  const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
  const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
  // 如果是Android或iPhone，则跳转至移动站点
  if (android || iphone) {
    
    
    location.href = 'http://m.itcast.cn'
  }})();

  // 立即执行函数
  //  !function () { }()   
  // 等价于 ()(function(){})

2.5履歴オブジェクト

ヒストリー(history)は、主に履歴の記録を管理するオブジェクトです.このオブジェクトはブラウザのアドレスバーの進む、戻るなどの操作に対応しています.履歴オブジェクトは実際の開発では一般的にあまり使われませんが、使われ
ます
.一部の OA オフィスシステムでは、お会いしましょう。

[外部リンクの画像の転送に失敗しました。ソースサイトにはリーチング防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-4hrRAKZC-1680687479437)(assets/1676047834796.png)]

一般的な方法:

[外部リンクの画像の転送に失敗しました。ソースサイトにはリーチング防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-UkBImO2q-1680687479438)(assets/1676047846593.png)]

<body>
  <button class="back">←后退</button>
  <button class="forward">前进→</button>
  <script>
    // histroy对象
    // 1.前进
    const forward = document.querySelector('.forward')
    forward.addEventListener('click', function () {
      
      
      // history.forward() 
      history.go(1)
    })
    // 2.后退
    const back = document.querySelector('.back')
    back.addEventListener('click', function () {
      
      
      // history.back()
      history.go(-1)
    })
  </script>
</body>

3 つのローカルストレージ (今日の焦点)

ローカルストレージ: データをローカルブラウザーに保存し、データベースを小さくし、ページの更新データが失われることはありません
。

データの永続性を実現するために、データを失うことなくページを更新または閉じる
容量が大きく、sessionStorageとlocalStorageは5M程度

3.1localStorage (フォーカス)

機能:データはローカルブラウザに長期間永続的に保持され、ページが更新されたり閉じられたりしてもデータは失われません。

機能:キーと値のペアの形式で格納され、文字列として格納されます。ウィンドウキーが省略されている場合、値は引用符付きの文字列に変換する必要があり
ます。

[外部リンクの画像の転送に失敗しました。ソースサイトにはリーチング防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-VLFLXXGr-1680687479439)(assets/1676049635087.png)]

  <script>
    // 本地存储 - localstorage 存储的是字符串 
    // 1. 存储 (键值对 添加英阿猴)
    localStorage.setItem('age', 18)

    // 2. 获取
    console.log(typeof localStorage.getItem('age'))

    // 3. 删除
    // localStorage.removeItem('age')
  </script>

3.2sessionStorage (了解)

特性：

使い方は基本的にlocalStorageと同じ
違いは、ページブラウザを閉じると、sessionStorage に保存されたデータが消去されることです。

ストレージ: sessionStorage.setItem(key,value)
取得: sessionStorage.getItem(key)
削除: sessionStorage.removeItem(key)

3.3localStorage は複雑なデータ型の JSON を保存します

JSON 文字列:

まずは1弦
属性名は一重引用符ではなく二重引用符で囲みます
属性値が文字列型の場合は、二重引用符
で囲む必要もあります
問題: ローカルに格納できるのは文字列のみで、複雑なデータ型は格納できません。
解決策: 複雑なデータ型を JSON 文字列に変換し、ローカルに保存する必要があります
構文: JSON.stringify(複合データ型)

データを取得する

問題: ローカルストレージから取得した文字列はオブジェクトではないため、直接使用することはできません
解決策: 抽出された文字列をオブジェクトに変換します
構文: JSON.parse(JSON 文字列)

<body>
  <script>
    // 本地存储复杂数据类型
    const goods = {
      
      
      name: '小米',
      price: 1999
    }
    // localStorage.setItem('goods', goods)
    // console.log(localStorage.getItem('goods'))

    // 1. 把对象转换为JSON字符串  JSON.stringify
    localStorage.setItem('goods', JSON.stringify(goods))
    // console.log(typeof localStorage.getItem('goods'))

    // 2. 把JSON字符串转换为对象  JSON.parse
    console.log(JSON.parse(localStorage.getItem('goods')))

  </script>
</body>

4 総合ケース

学生情報フォームのページ更新は失われません、localstorage

1. ページを開き、ローカルストレージにデータがあるかどうかを確認します。データがある場合は、データなしでオブジェクトを返します。空の配列を作成します。

 //判断本地存储，存放信息 
   const data = localStorage.getItem('user-data')
   // 有了返回对象，没有创建数组
   let arr = data ? JSON.parse('data') : []

1. レンダリングモジュール、配列をトラバースする新しい方法 - 配列マップメソッド (tr を作成する必要はなく、tbody に追加)
- arr.join() は map によって返された配列を変更します

4.1 配列マップ法

使用シーン：

map は、配列を走査してデータを処理し、
マッピングとも呼ばれる新しい配列マップを返すことができます。マッピングとは、互いに「対応する」要素の 2 つのセット間の関係を指す用語です。
map の要点は戻り値 return があり、 forEach には戻り値がない (未定義)

4.2 配列の結合方法

**関数: **join() メソッドは、配列内のすべての要素を文字列に変換するために使用されます

文法：

<body>
  <script>
    const arr = ['red', 'blue', 'pink']

    // 1. 数组 map方法 处理数据并且 返回一个数组
    const newArr = arr.map(function (item, index) {
      
      
      // console.log(item)  // 数组元素
      // console.log(index) // 索引号
      return item + '颜色'
    })
    console.log(newArr)

    // 2. 数组join方法  把数组转换为字符串
    // 小括号为空则逗号分割
    console.log(newArr.join())  // red颜色,blue颜色,pink颜色
    // 小括号是空字符串，则元素之间没有分隔符
    console.log(newArr.join(''))  //red颜色blue颜色pink颜色
    console.log(newArr.join('|'))  //red颜色|blue颜色|pink颜色
  </script>
</body>