Local data storage solutions and cookie pit

Local data storage solutions and cookie pit

problem:

cookie too long, resulting in the failure to open the page

background:

There is a demand for more open work order that is more open tab (iframe) on the same page, but only need to refresh the current page still retains more when the iframe refresh in the company's projects, there are two refresh way, the first one is the keyboard, press F5 or ctrl + F5 or ctrl + R, the second is click your browser's refresh the upper left corner, click F5 to refresh time can prevent the default event listener reached by clicking F5 to refresh only the keyboard current iframe, but when the user clicks on the browser's refresh must request the backend reload the page, so then need to record some of the information in the iframe currently open, including href and so on.

Click F5 to refresh only solve this iframe:

code show as below:

//F5键 F5 和 ctrl R 只刷新当前iframe
document.onkeydown = function (e){
    e = e || window.event;
    if((e.ctrlKey && e.keyCode == 82) || e.keyCode == 116) {//F5 和 ctrl R 刷新，禁止
        var cur_href= window.location.href; //获取到当前iframe的href
        e.preventDefault();      //阻止默认刷新
        location.href=cur_href;  //刷新当前iframe
    }
}

Click resolve browser refresh (pit):

Then, click refresh your browser will inevitably want the server to re-address request access to information, so the process is more open in front of the iframe must remain open in an iframe href and title information, etc., then the pit came.

Solution one: the information stored iframe open at the rear end, each open to send a request for information stored iframe iframe rearward end, a plurality of open proceeds additionally

advantage:

• Simple and crude

Disadvantages:

• Each opening or closing a rear end of the request had iframe, efficiency problems exist

Solution two of cookie pit: do not open iframe information stored in back-end, locally saved in the browser a cookie

advantage:

• Simple and crude
• Data locally, does not interact with the back-end, high efficiency

Disadvantages:

• A cookie is limited in size, the number under each domain name restrictions, it is important that the data size of each cookie can not exceed 4kb (limitations largest point)
• cookie effective time settings, if you do not set the expiration time would have been saved locally, close the browser will be stored on hard disk, not automatically destroyed, resulting in the number of possible excessive
• Security is not high
• Every access to the server sends a cookie, wasting bandwidth

After the time is not the time to do this project taking into account other colleagues also used a lot of cookie while not taking into account a user opens a lot iframe causes the cookie value exceeds the limit 4kb, eventually leading to failure cookie is too long so that the page is opened (live and learn a lesson)

LocalStorage Third solution of: the ifrmae information stored in the localStorage

advantage:

• simple
• The storage size is 5M, enough to use
• Stored locally, does not interact with the backend

Disadvantages:

• The number of data stored in localStorage is permanently retained locally, close (close the browser tab or close the browser does not destroy) session
• As the demand after the user closes the browser tab or close the browser to clear these saved iframe information, so the data localStorage is not clean (reason: js not listen close your browser)

Solution four of sessionStorage: the information is stored in sessionStorage in ifrmae

advantage:

• simple
• The storage size is 5M, enough to use
• Stored locally, does not interact with the backend
• Based on the presence of the session, the session closes data cleaning (just meet the demand for products, the perfect solution)

The method involves:

保存localStorage：localStorage.setItem("key","value");
获取localStorage：localStorage.getItem("key");

保存sessionStorage：sessionStorage.setItem("key","value");
获取sessionStorage: sessionStorage.getItem("key");