タグ: JavaScript

JavaScriptのデータ保存方法（Cookie、SessionStorage、LocalStorage）

データ保存方法の違い

比較項目CookieSessionStorageLocalStorage
容量4KB5〜10MB（ブラウザ、環境依存）5〜10MB（ブラウザ、環境依存）
保存期限期間など独自に設定可能タブを閉じるまで永続的に保持、ブラウザアプリのアンインストールなどで消える
保存場所ローカルのブラウザアプリ内及び、サーバーローカルのブラウザアプリ内ローカルのブラウザアプリ内
HTTPリクエストの送信有無有無無
アクセス制御別タブ、別ウィンドウからのアクセス可能同一のタブからのみアクセス可能別タブ、別ウィンドウからのアクセス可能

Cookie

値の保存

document.cookie = "key=値";

値の取得

function getCookie(key) {
  var cookies = document.cookie;
  var cookiesArray = cookies.split(';');

  var result = "";
  cookiesArray.map((item) => {
    var cArray = item.split('=');
    if (cArray[0] == key) {
      result = cArray;
    }
  });
  return result;
}

getCookie('key');

有効期限設定

const second = 600 // 600秒
document.cookie = "key=値" + ";max-age=" + second;

SessionStorage

値の保存

sessionStorage.setItem('key','値');

値の取得

sessionStorage.getItem('key');

値の削除

sessionStorage.removeItem('key');

全データの削除

sessionStorage.clear();

LocalStorage

値の保存

localStorage.setItem('key','値');

値の取得

localStorage.getItem('key');

値の削除

localStorage.removeItem('key');

全データの削除

localStorage.clear();

JavaScriptで文字列をクリップボードにコピーする

手順

以下の関数の第一引数にコピーしたい文字列を渡すことでクリップボードへコピーできます。

function copyText(target) {
  // コピー用の仮テキストエリア作成
  const txtarea = document.createElement("textarea");
  txtarea.textContent = target;

  // bodyに仮テキストエリアを設定
  const body = document.getElementsByTagName("body")[0];
  body.appendChild(txtarea);

  // コピー
  txtarea.select();
  document.execCommand('copy');

  // コピー用の仮テキストエリア削除
  body.removeChild(txtarea);
}

JavaScriptで配列と配列の重複チェック

はじめに

2つ以上の配列があり、A配列にB配列の要素が重複しているか？重複している場合はどれが重複しているのか？を調べる方法を記載します。

「filter」関数を使用しての実装になります。

手順

A配列にB配列の要素重複確認

const arrayA = ['Apple', 'Google', 'Facebook', 'Zoom', 'Slack'];
const arrayB = ['Apple', 'Facebook'];

const result = arrayA.filter(item => arrayB.includes(item));

console.log(result); // ["Apple", "Facebook"]

A配列にB配列とC配列の要素重複確認

const arrayA = ['Apple', 'Google', 'Facebook', 'Zoom', 'Slack'];
const arrayB = ['Apple', 'Facebook'];
const arrayC = ['Google'];

const result = arrayA.filter(item => arrayB.includes(item) || arrayC.includes(item));

console.log(result); // ["Apple", "Google", "Facebook"]

JavaScriptのみで指定のオブジェクトまでスクロールする方法

はじめに

ページ内リンク（スヌース）などで、たまに利用したのでその方法を記載します。

Reactを使用する場合など、jQueryなどが使用できない場合があると思いますので、ここではシンプルなJavaScriptで記載しています。

手順

ソースコードの全量は以下

var targetElement = document.getElementById("ID名");

window.scroll({
  top: targetElement.getBoundingClientRect().top + window.pageYOffset,
  behavior: "smooth"
});

1行目で、移動したいオブジェクトをID指定で取得する。

「window.scroll」で取得したオブジェクトまでの距離を計測して移動する。

JavaScriptで配列操作（filter、map、forEach）

filter関数

特定の条件に一致するデータのみを取得したい場合などに利用する。

const array = [1, 2, 3, 4, 5];
const result = array.filter((item) => {
  return item > 2;
});

console.log(result); // [3, 4, 5]

以下のようにシンプルな記載方法もある。

const array = [1, 2, 3, 4, 5];
const result = array.filter(item => item > 2);

console.log(result); // [3, 4, 5]

map関数

配列内の全データを操作する場合に利用する。

const array = [1, 2, 3, 4, 5];
const result = array.map((item) => {
  return item + 1;
});

console.log(result); // [2, 3, 4, 5, 6]

以下のようにシンプルな記載方法もある。

const array = [1, 2, 3, 4, 5];
const result = array.map(item => item + 1);

console.log(result); // [2, 3, 4, 5, 6]

forEach関数

配列内の全データを取得して何らかの処理する場合に利用する。

const array = [1, 2, 3, 4, 5];

array.forEach((item) => {
  console.log(item);
});

以下のようにシンプルな記載方法もある。

const array = [1, 2, 3, 4, 5];
array.forEach(item => console.log(item));