tech-memo

Web API

location

webページのURLにアクセスできる.
location.protcolでhttp、location.searchでクエリストリングなど.

リダイレクト

location.href = '/'でルートに戻る

クライアントのクリップボード

navigator.clipboard

クライアントの位置情報（GPS）

navigator.geolocation

現在地（緯度、経度）の取得

navigator.geolocation.getCurrentPosition((position) => {
  console.log(position.coords.latitude, position.coords.longitude);
})

選択文字列: window.getSelection()

window.getSelection().toString(): 選択した文字列
window.getSelection().getRangeAt(0)でrangeオブジェクトを返し、range.startOffset/range.endOffsetで選択したノードにおける位置、range.startContainerで選択開始位置のnodeオブジェクトを返す

クエリパラメータを扱う: URLSearchParams

// URLのクエリストリング例: ?name=John&age=30

const queryParams = new URLSearchParams(window.location.search);

// クエリパラメータの取得
const name = queryParams.get('name'); // "John"
const age = queryParams.get('age');   // "30"

// クエリパラメータの設定
queryParams.set('city', 'New York'); // 新しいクエリパラメータを追加
queryParams.set('age', '31');       // ageの値を更新

// クエリストリングの生成
const newQueryString = queryParams.toString(); // "name=John&age=31&city=New+York"

localStorage

window.localStorage 保存

localStorage.setItem('name','paul')

取り出し

localStorage.getItem('name')

数値は保存できない。文字列のみ

localStorage.setItem('age',48)
localStorage.getItem('age') # '48'が返る

なのでJSON文字列で保存する

jsonStr = JSON.stringify({age: 48})
localStorage.setItem('data', json)
jsonobj = JSON.parse(localStorage.getItem('data'))