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> 
