Several ways to cache JavaScript browsers!

browser cache

Original link: https://note.noxussj.top/?source=sifo https://link.segmentfault.com/?enc=EOFlzCwDJ9ggqfpcgaPJ4A%3D%3D.%2BO0U4qYtC98cg5Nu0ASK4pWOh7%2FtGQyhgpRmOsy26tRtr04N0WIk86kxpYawnQUM

The browser cache mainly includes cookies. In the new HTML5 standard, local storage localStorage and session storage sessionStorage are added.

cookie

What are cookies?

Cookies are cached data that are primarily stored on your computer. When you initiate a network request, the cookie information under the current domain name and port will also be transmitted to the backend.

Create cookie

By default, no expiration time is set, and the cookie is deleted when the browser is closed (closing the current tab will not delete it).

    document.cookie = 'name=xiaoming' // 'name=xiaoming'
    document.cookie = 'age=18' // 'name=xiaoming; age=18'

Create a cookie and set it to expire in 10 minutes

    // Thu Jan 12 2023 17:22:34 GMT+0800 (China Standard Time) 
    const expires = new Date(new Date().getTime() + 1000 * 60 * 10) 
    document.cookie = 'class=A; expires = ' + expires

Read cookies

    const cookie = document.cookie // 'name=xiaoming; age=18; class=A'

Modify cookies

It is equivalent to deleting the old cookie and creating a new cookie.

    document.cookie = 'name=libai' // 'age=18; class=A; name=libai'

Delete cookies

Directly set an expiration time for the cookie, and it will be deleted after closing the browser.

    document.cookie = 'class=A; expires= Thu Jan 01 1970 08:00:00 GMT+0800 (China Standard Time)'

localStorage

There will be an independent localStorage data under each domain name port. It has no expiration time. As long as you don't clear it manually, it will be there forever. localStorage is simpler to use than cookies.

Create localStorage property

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

Read localStorage property

    localStorage.getItem('name') // 'xiaoming'

Modify localStorage attribute

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

Delete localStorage attribute

    localStorage.removeItem('name')

Clear the localStorage object

    localStorage.clear()

sessionStorage

There will be an independent sessionStorage data under each domain name port, which has an expiration time. When you close the current page (including browser tabs), the sessionStorage cache will be destroyed. Its usage is almost the same as localStorage.

Create sessionStorage property

    sessionStorage.setItem('name', 'xiaoming')

Read sessionStorage property

    sessionStorage.getItem('name') // 'xiaoming'

Modify sessionStorage attribute

    sessionStorage.setItem('name', 'libai')

Delete sessionStorage attribute

    sessionStorage.removeItem('name')

Clear sessionStorage object

    sessionStorage.clear()

The difference between the above three

Storage size

cookie: data size cannot exceed 4k

localStorage, sessionStorage: the data size supports about 5M, and different browsers have different storage sizes.

Life cycle (validity time)

Cookie: The validity period needs to be set. After expiration, the cookie will be destroyed.

localStorage: Permanent unless manually cleaned up

sessionStorage: will be destroyed after the page is closed (including tabs)

Storage form

All three store string types. Complex objects can be processed using json’s stringify and parse methods.

safety

Cookie: usually carried in the header when requesting

localStorage, sessionStorage: will not be carried when requesting

Several ways to cache JavaScript browsers!

browser cache

Guess you like