WebStorage Record scroll bar position

Source: Internet
Author: User
Tags in domain

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.