前端常用方法函數實例詳解

本文主要和大家分享前端編寫過程常用方法函數實例詳解，希望能幫助大家。

1. push() 方法

#定義與用法
push() 方法可在陣列的末端新增一個或多個元素，並傳回新的長度。

語法

arrayObject.push(newelement1,newelement2,....,newelementX)。

回傳值
把指定的值加到陣列後的新長度。

說明
push() 方法可將它的參數順序加到 arrayObject 的尾部。它直接修改 arrayObject，而不是建立一個新的陣列。 push() 方法和 pop() 方法使用陣列提供的先進後出棧的功能。

提示與註解
註解：此方法會改變陣列的長度。
提示：若要在陣列的開頭新增一個或多個元素，請使用unshift() 方法.

2. 本機儲存localStorage

##將資料儲存到本機

    const info = {
        name: 'Lee',
        age: 20,
        id: '001'
    };
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));

從本機儲存取得資料

    var data1 = JSON.parse(sessionStorage.getItem('key'));    var data2 = JSON.parse(localStorage.getItem('key'));

本機儲存中刪除某個已儲存的資料

    sessionStorage.removeItem('key');
    localStorage.removeItem('key');

###刪除所有已儲存的資料######

    sessionStorage.clear();
    localStorage.clear();

#######監聽本機儲存的變更############Storage 變更（增加、更新、刪除）時的觸發，同一個頁面發生的改變不會觸發，只會監聽同一網域下其他頁面改變Storage######

    window.addEventListener('storage', function (e) {
        console.log('key', e.key);        console.log('oldValue', e.oldValue);        console.log('newValue', e.newValue);        console.log('url', e.url);
    })

###3. input######## #去掉點擊後的藍色邊框######

 1、在顶部style中直接控制css样式：<style type="text/css">

       input{outline:none;}</style>2、直接用 input:focus { outline: none; } 控制聚焦时不出现蓝色边框~

以上是前端常用方法函數實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！