WebStorage records the position of the scroll bar and webstorage scroll bar.

WebStorage records the position of the scroll bar and webstorage scroll bar.

I followed the public account HTML5 School and saw this article "using local storage to record the position of the scroll bar". I tried it with curiosity and then read some information about WebStorage.

The address https://mp.weixin.qq.com/s/z34GRUZvDU2hCbH6Kc_ZDA of this article is attached to everyone.

I searched some articles on the Internet to record the position of the scroll bar, mostly using cookies for recording. Below I will analyze the differences between cookies and webstorage.

	Advantages	Disadvantages	Application scenarios
Cookie	Easy to use	Poor security. Cookies stored on the client are easily stolen by hackers.	Keep Logon
	The browser is responsible for sending data	Limited storage data capacity, up to 4 kb	Keep the last page viewed
	The browser automatically manages cookies of Different Sites	Limited storage capacity. Most browsers have a maximum of 30 or 50	Browser count
		If the security configuration of the browser is the highest level, the Cookie becomes invalid.	Ad tracking
		Cookie is not suitable for storing a large amount of data, because the Cookie will be transmitted by each request to the server, resulting in slow Cookie speed and low efficiency.	Keep shopping cart status
WebStorage	The storage space is larger. In IE8, each independent storage space is 10 MB. other browsers are different, but all of them are larger than cookies.	Data stored locally is not encrypted and never expires, which can easily cause privacy leakage.
	The storage content is not sent to the server, avoiding bandwidth waste.	The browser allocates independent space for each domain, that is, the script cannot access the bucket in Domain B in Domain, however, the browser does not check whether the script is in the same domain as the current domain. That is, the script embedded in Domain A in Domain B can still access data in Domain B.
	More rich and easy-to-use interfaces
	Independent storage space. Each domain, including subdomains, has an independent storage space.

 

WebStorage usage

 

Method	Description
Length	Obtain the number of key-value pairs stored in the Storage object
Key (index)	Obtains the key at the specified position. The index starts from 0 and is mostly used to facilitate Storage objects.
GetItem (key)	Obtains the object based on the key. If the specified key does not exist, null is returned.
SetItem (key, value)	Store data. If the value already exists, replace the old value. If you disable website storage, or the storage reaches the maximum capacity, an exception is thrown during the setting.
RemoveItem (key)	Deletes a specified key. If no key exists, no operation is performed.
Clear ()	Delete all data. It is safe to call clear () for an empty Storage object and no operation is performed.

Below is the js Code

<Script type = "text/javascript"> var ls = window. localStorage; // obtain the value of if (ls. getItem ('stop') {var oldStop = ls. getItem ('stop'); // The obtained value to set the position of the page scroll bar if (document.doc umentElement. scrollTop) {document.doc umentElement. scrollTop = oldStop;} else {document. body. scrollTop = oldStop ;}} else {console. log ('Sorry, the value of the scroll bar cannot be found ');} // listen to the status of the page scroll bar (whether to scroll) window. addEventListener ('scroll ', function ( ) {// Obtain the position of the page scroll bar when scrolling. var sTop = document.doc umentElement. scrollTop | document. body. scrollTop; try {// Save the position of the scroll bar to the local storage. // ls. sTop = sTop; // or store ls in this way. setItem ("sTop", sTop);} catch (e) {if (e = QUOTA_EXCEEDED_ERR) {alert ("Quota exceeded! ") ;}}, False); </script>