Introduction: The above article is about [online system how to correctly log] next I summarize [front-end interview often ask sessionStrorage, localStrorage, cookie, session difference and application scenarios]. Think I can also join the group to urge learning to discuss technology. QQ group: 1076570504 personal learning database http://www.aolanghs.com/ wechat public number search [Huanshao growth path]

A, cookie,

Save mode: Cookie Is saved on the browser

Life cycle: If the expiration time is not set in the browser, the cookie is stored in memory and its life cycle ends when the browser closes. This cookie is referred to as session cookie. If a cookie expiration time is set in the browser, the cookie is saved in the hard disk. After the browser is closed, the cookie data still exists until the expiration time ends.

Function: Used to trace the identity of the browser user session mode

Version: HTML4 Local storage

Storage size: A single cookie cannot store more than 4KB of data

Application scenarios: (1) Determine whether the user has logged in to the website, so that the user can automatically log in (or remember the password) at the next login. If we delete the cookie, the login information must be refilled each time we log in.

(2) Save information such as the time of the last login.

(3) Save the page you viewed last time

(4) Browse count

Store content: Can only store string types, as text;

Disadvantages: (1) size limit 4KB

(2) Users can operate (disable) cookies, so that the function is limited

(3) Low security

(4) Some states cannot be saved in the client.

(5) Cookies are sent to the server every time they are accessed, which wastes bandwidth.

(6) Cookie data has the concept of path, which can restrict cookies to only belong to a certain path.

Second, the session

Save mode: Session Saved on the server

Life cycle: Default failure time is 20 minutes (starts when not accessed)

Function: Used to trace the identity of the browser user session mode

Version: HTML4 Local storage

Storage size: There is no limit to the size.

Application scenario: The special information of each user is saved. The value of the variable is saved on the server. The SessionID is used to distinguish different clients.

(1) Shopping cart in online shopping mall

(2) Save user login information

(3) Put some data into session for different pages of the same user

(4) Prevent illegal login

Store content: Stored in a data structure similar to Hashtable, which can support any type of object (a session can contain multiple objects)

Disadvantages:

(1) The more things the Session stores, the more memory the server occupies. For websites with a large number of online users, the memory pressure of the server will be relatively high.

I9 c vWESx i9 c vWESx i9 C vWESx i9 C vWESx i9 C VWESx i9 C VWESx Overusing session variables can result in unreadable and unmaintainable code.

Third, localStrorage

Save mode: The data is saved on the local hardware device (usually the hard disk, but also other hardware devices) of the client. Even if the browser is closed, the data still exists and can be used again when you open the browser to visit the website. (Save in the client, do not interact with the server.)

Life cycle: Permanent storage

What it does: Like cookies and sessions, it’s just an upgraded version of them

Version: HTML5 native storage

Storage size: 5MB

Application scenario: This parameter is used for long-term login (+ check whether a user has logged in). This parameter is suitable for data stored locally for a long time

Store content: Only string types can be stored, and for complex objects can be handled using Stringify and Parse for JSON objects provided by ECMAScript

Four, sessionStrorage

Save mode: Saves data in the Session object. Session refers to the period of time that a user spends browsing a website, from entering the website to closing the browser. The Session object can be used to store any data that is required for that period of time (stored on the client and not interactively communicated with the server).

Life cycle: Temporary save

What it does: Like cookies and sessions, it’s just an upgraded version of them

Version: HTML5 native storage

Storage size: 5MB

Application scenario: One time login with sensitive accounts.

Store content: Only string types can be stored, and for complex objects can be handled using Stringify and Parse for JSON objects provided by ECMAScript

Five, the difference between

The cookie’s life cycle closes when the browser closes. SessionStrorage is a temporary save. LocalStrorage is saved permanently.

Cookie transmission is not secure, wasting bandwidth (the client requests the server with cookie, so it wastes bandwidth)

SessionStrorage and localStrorage do not communicate with the server so they are resource efficient and more secure

Cookie transfers are only 4KB and have a limited size. SessionStrorage and localStrorage are 5MB larger.

Cookies can only be transmitted as string text. SessionStrorage and localStrorage support any type of object

The more you know, the more you don’t know. Find the right direction, adhere to their own positioning! Keep moving forward, there will be a bright future in the end! Creation is not easy, your support is the biggest recognition for me! This article will continue to be updated, and we’ll see you next time! QQ group: 1076570504 wechat public number search “huan little growth road” please support more!