Detailed explanation of common front-end method function examples

#This article mainly shares with you detailed examples of common methods and functions in the front-end writing process. I hope it can help everyone.

1. push() method

Definition and usage
push() method can add an item to the end of the array or multiple elements and returns the new length.

Syntax

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

Return value
The new length after adding the specified value to the array.

Description
push() method can add its parameters to the end of arrayObject in sequence. It directly modifies the arrayObject instead of creating a new array. The push() method and pop() method use the first-in-last-pop function provided by the array.

Tips and Notes
Note: This method will change the length of the array.
Tip: To add one or more elements to the beginning of the array, use the unshift() method.

2. Local storage localStorage

Save data to local

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

Get data from local storage

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

Delete a saved data from local storage

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

Delete all saved data

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

Listen for local storage changes

Storage changes (increase , update, delete). Changes in the same page will not trigger. It will only monitor changes in other pages under the same domain name. 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

Remove the blue border after clicking

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

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

The above is the detailed content of Detailed explanation of common front-end method function examples. For more information, please follow other related articles on the PHP Chinese website!