sessionstorage: local temporary storage

HTML5 web storage has two important objects:

  • localStorage - data storage with no time limit
  • sessionStorage - data storage for a session (close the window, the stored data is cleared)

When it comes to in-browser state storage in general, cookies are the first thing that comes to mind.

But please recall such a scene, open an APP, pop up an advertisement to buy a member, close it decisively, and then go forward, backward, refresh, and the advertisement will not come out.

After closing the APP and reopening it, the ad is coming again~~

At this time, if you understand sessionstorage, you will soon understand how this function is implemented.

Realize ideas

①Query sessionStorage whether there is a closed advertisement mark ②Hide sessionStorage.setItem("key", "value")
or display advertisements according to the marksessionStorage.getItem("key")

In this way, every time you close the browser or APP, the ad will pop up again

Other application examples

When reading an article, if you accidentally refresh the page, it will jump to the last browsing position

① Scroll the page, save the scroll position in the session (if there is paging, store the page number at the same time)
② Enter the page again, and retrieve the last saved browsing position and stored page number in the session
③ (If there is paging, open it first response page number), scroll to the corresponding position

$(window).scroll(function(){
    if($(document).scrollTop()!=0){
    sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置
    } 
});

window.onload = function()
{
  var _offset = sessionStorage.getItem("offsetTop");
  $(document).scrollTop(offsetTop);
};

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325134864&siteId=291194637