Skip to main content

常用的東西

localStorage​

取得 localStorage 這個 'KEY_NAME' 的 value

localStorage.getItem("KEY_NAME"); // typeof string
JSON.parse(localStorage.getItem("KEY_NAME")); // typeof JSON

設定一個 'KEY_NAME'在 localStorage

localStorage.setItem("KEY_NAME", JSON.stringify(data));

清除所有 localStorage

localStorage.clear(); // clear all

移除 'KEY_NAME' 的這個項目

localStorage.removeItem("KEY_NAME");

Window.localStorage

取得 cookie

document.cookie; //all cookies

用上面的方式是沒有辦法拿到 httpOnly 的

以下是一個例子：

// 移除 cookie
function removeCookie(name) {
    document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
}

// 例子：如果名為 "user" 的 cookie 到期，將其移除
const userCookie = getCookie("user");
if (!userCookie) {
    removeCookie("user");
}

// 獲取 cookie 的函数
function getCookie(name) {
    const cookies = document.cookie.split(";");
    for (const cookie of cookies) {
        const [cookieName, cookieValue] = cookie.split("=").map((item) => item.trim());
        if (cookieName === name) {
            return cookieValue;
        }
    }
    return null;
}

設計 90 天後 cookie 消失

// 設置 cookie 過期時間為 90 天後
function setCookieWithExpiration(name, value) {
    const expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + 90); // 當前日期 + 90 天

    const cookieValue = `${name}=${value};expires=${expirationDate.toUTCString()};path=/`;
    document.cookie = cookieValue;
}

FormData​

const formData = new FormData();
formData.append("image", evt.target.files[0]);
formData.append("directory", "/users");
const data = {
    formData,
    token: this.$cookies().get("auth").access_token,
};
const img = await this.uploadImage(data);
evt.target.value = "";

使用 JavaScript FormData 傳送資料. 前端建立處理 FromData 的函式處理物件來提交資料給後端。 | by Jay | Medium

FormData 基礎用法 | 為了可能的聲音

IIFE​

IIFE (Immediately Invoked Function Expression) 是一個定義完馬上就執行的 JavaScript function (en-US)。使用 Grouping Operator (en-US) () 包起來的 anonymous function。這樣的寫法可以避免裡面的變數污染到 global scope。

Function 轉換為 expression 形式，並且馬上執行，function scope 內的變數在外面是無法存取的。

const result = (function () {
    var name = "Barry";
    return name;
})();
// Immediately creates the output:
console.log(result); // "Barry"

可能的使用情況，本身的 object 需要 function 去處理資料，直接 return 值出來使用。

const a = {
    b: (function () {
        return "thomas";
    })(),
    c: (() => {
        return "john";
    })(),
};

console.log(a.b, a.c); // thomas john

async function 版本

const a = {
    b: (async function () {
        return "thomas";
    })(),
    c: (async () => {
        return "john";
    })(),
};

直接傳遞參數

(function(name){
    return name
})('thomas'),

// thomas

Custom Event​

本方法在 IE 的支援度很差，真的逼不得已，不建議使用

/*
demo 1
<div id="div"></div>
*/

<script>
var elem = document.querySelector("#div");
var event = document.createEvent("Event");

// 定义事件名称myEvent
event.initEvent("myEvent", true, true);

// 监听myEvent
elem.addEventListener("myEvent",
    function(e) {
        console.log(e);
    },false
);

// 使用目标对象去派发事件，可以是元素节点/事件对象
elem.dispatchEvent(event);

</script>
/*
demo 2
<div id="div"></div>
*/

<script>var elem = document.querySelector('#div'); var event = new Event('myEvent'); elem.addEventListener('myEvent', function (e) {console.log(e)}, false); elem.dispatchEvent(event);</script>

js 使用 dispatchEvent 派发自定义事件 - 掘金

CustomEvent() - Web APIs | MDN

日光節約時間​

"日光節約時間"（Daylight Saving Time，DST）是一種時間調整制度，旨在充分利用日光，減少在夜間的用電需求。在日光節約時間期間，時鐘被調整以提前一小時，使晚上更長，減少人們在早晨用電的需求。通常，這種制度在夏季實施，以便人們能夠更多地享受白天的陽光。 日光節約時間的主要目標是：

  1. 節省能源：通過減少夜間照明和取暖需求，降低用電峰值，從而減少能源消耗。
  2. 提高生活質量：延長白天的時間，使人們能夠更多地參與戶外活動和休閒，改善生活質量。
  3. 減少交通事故：由於晚間交通更少、能見度更好，可以減少交通事故。

日光節約時間的實施和規定因國家和地區而異，有些地方可能根本不使用這一制度。通常，日光節約時間開始於春季（通常是 3 月或 4 月），時鐘提前一小時，然後在秋季（通常是 10 月或 11 月）結束，時鐘恢復原來的時間。

需要注意的是，日光節約時間可能在不同的地區和國家有不同的名稱，也有一些地區不使用這一制度。目的和實施方式可能會有所不同。

Intl.DateTimeFormat

var options = { calendar: "chinese", numberingSystem: "arab" };
var dateFormat = new Intl.DateTimeFormat("default", options);
var usedOptions = dateFormat.resolvedOptions();

console.log(usedOptions.calendar);
// → "chinese"

console.log(usedOptions.numberingSystem);
// → "arab"

console.log(usedOptions.timeZone);
// → "America/New_York" (the users default timezone)

深淺拷貝 (shallow copy vs deep copy)​

3 Ways to Clone Objects in JavaScript | SamanthaMing.com

shallow copy​

const a = { b: 1, c: { data: "pizza" } };
const d = { ...a }; // shallow copy

const a = { b: 1, c: { data: "pizza" } };
const d = Object.assign({}, a); // shallow copy

deep copy​

const a = { b: 1, c: { data: "pizza" } };
const d = JSON.parse(JSON.stringify(a)); // deep copy

Preview Image​

開發過中程常常會有上傳檔案的功能，上傳完之後也要可以馬上去 preview image 的情況，此時我們可以透過 files來作到我們想要的效果 ↓

<form>
    <input @change="getFile($event)" type="file" id="upload_file" />
    <img v-if="url" :src="url" />
</form>

在 input onChange 的時候觸發的事件，在此事件中取得 files

export default {
    setup() {
        let url = ref("");
        const getFile = ($event) => {
            const file = $event.target.files[0];
            url.value = URL.createObjectURL(file); //把上傳檔案的 image url 傳入
        };
        return { getFile, url };
    },
};

取得上傳 image 的 size 寬度​

要取得上傳圖片的寬度，你可以使用 JavaScript 的 Image 物件，透過 Image 物件的 onload 事件獲取圖片的寬度。以下是一個範例程式碼：

document.getElementById("fileInput").addEventListener("change", function (e) {
    var file = e.target.files[0];
    var img = new Image();
    var reader = new FileReader();

    reader.onload = function (e) {
        img.onload = function () {
            console.log("圖片寬度: " + img.width);
        };
        img.src = e.target.result;
    };

    reader.readAsDataURL(file);
});

這段程式碼做的事情是：

  1. 當使用者選擇了一個檔案後，取得該檔案的資訊。
  2. 建立一個新的 Image 物件和 FileReader 物件。
  3. 當 FileReader 讀取檔案完成後，將讀取到的結果設定給 Image 物件的 src。
  4. 當 Image 物件的圖片載入完成後，透過 Image 物件的 width 屬性取得圖片的寬度並輸出到 console。

注意這段程式碼需要放在 HTML 中包含了 id 為 'fileInput' 的 input 標籤的環境中才能正確運作。例如：

<input type="file" id="fileInput" />

demo

作一個假的 dom 來當成 scroll bar 來 move​

JavaScript 中 ?? 和 || 的差别​

https://hackmd.io/@QYQqQ8KlTdm1jlpCMRlAyw/r1xHIrfoqC