WebStorage Record scroll bar position

Because of the public attention of the "HTML5 School" see this article "using local storage, record the position of the scrollbar", then curious knock to try, and then read some information about WebStorage

Attach the address of this article Https://mp.weixin.qq.com/s/z34GRUZvDU2hCbH6Kc_ZDA with everyone.

Search on the Internet some records scroll bar position of the article, mostly with cookies to record, the bottom I see the data and we analyze the difference between the cookie and WebStorage.

	Advantages	Disadvantages	Application Scenarios
Cookies	Simple to use	Poor security, cookies are saved on the client and easily hacked by hackers	Keep logged in
	The browser is responsible for sending data	Limited storage data capacity, capped at 4KB	Keep last Viewed Page
	Browser automatically manages cookies at different sites	Limited storage, most browsers capped at 30 or 50	Browse Count
		If the security configuration of the browser is the highest level, the cookie expires	AD Tracking
		Cookies are not suitable for large amounts of data storage because cookies are passed by each request to the server, resulting in slow and inefficient cookies.	Shopping Cart Hold Status
WebStorage	Greater storage space, 10M per independent storage space under IE8, different browsers, but larger than cookies	Data stored locally is unencrypted and never expires, which can easily lead to privacy leaks
	Store content is not sent to the server to avoid broadband waste	The browser allocates separate space for each domain, that is, the script cannot access storage space in domain A to the B domain, but the browser does not check that the script is in the same domain as the current domain, that is, scripts embedded in domain A in domain B still have access to the data in domain B
	More rich and easy to use interfaces
	Separate storage space with separate storage for each domain, including subdomains

The use of WebStorage

Method	Description
Length	Gets the number of key-value pairs stored in the storage object
Key (Index)	Gets the key at the specified position, starting at 0, which is used to facilitate storage objects
GetItem (Key)	Gets the object according to the key, or null if no specified key exists
SetItem (Key,value)	Stores the data and replaces the old value if the value already exists. If the user closes the store for the site, or if the store hits the maximum capacity, the setting throws an exception at this time
RemoveItem (Key)	Delete the specified key, or do nothing if it does not exist
Clear ()	Delete all data, empty storage object call Clear () is also secure and will not take any action

Here is the JS code

<script type= "Text/javascript" >varls =Window.localstorage; //gets the value inside the local store each time the page loads        if(Ls.getitem (' STop ')) {            varOldstop = Ls.getitem (' STop '); //gets the value to set the position of the page scroll bar            if(document.documentElement.scrollTop) {Document.documentElement.scrollTop=Oldstop; } Else{Document.body.scrollTop=Oldstop; }        } Else{Console.log (' Sorry, I can't find the value of the scroll bar '); }        //listens for the status of the page scroll bar (whether scrolling)Window.addeventlistener (' scroll ',function() {            //gets the position of the page scroll bar when scrolling            varSTop = Document.documentElement.scrollTop | |Document.body.scrollTop; Try{                //the position of the scroll bar is saved to the local store                //ls.stop=stop;//or stored in this wayLs.setitem ("STop", STop); }Catch(e) {if(e==Quota_exceeded_err) {Alert ("Quota exceeded!"); }            }        }, false); </script>

WebStorage Record scroll bar position