The background of the origin of local storage

Due to limitations in the size, format, and storage data format of cookies in the HTML4 era, if a website application wants to store some of the user's information on the browser side, it can only use cookies. However, these limitations of cookies mean that cookies can only store simple data such as identifiers such as IDs.

The following are cookie limitations:

Most browsers support cookies up to 4096 bytes.

Browsers also limit the number of cookies that a site can store on a user's computer. Most browsers only allow 20 cookies per site; if you try to store more cookies, the oldest cookies are discarded.

Some browsers also place an absolute limit on the total number of cookies they will accept from all sites, usually 300.

Cookies will be sent to the backend server along with Http requests by default, but not all requests require cookies. For example, requests for js, css, pictures, etc. do not require cookies.

In order to break a series of limitations of Cookie, HTML5 can directly store large amounts of data to the client browser through the new API of JS, and supports complex local databases, making JS more efficient. HTML5 supports two types of WebStorage:

Permanent local storage (localStorage)

Session-level local storage (sessionStorage)

Detect whether localStorage is supported:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>php中文网</title> 
</head>
<body>
<div id="result"></div>
<script>
    if(window.localStorage){     alert("浏览支持localStorage") }else{    alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }
</script>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> </head> <body> <div id="result"></div> <script> if(window.localStorage){ alert("浏览支持localStorage") }else{ alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") } </script> </body> </html>

submit Reset Code

Automatic operation

The background of the origin of local storage

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]