Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve the expiration mechanism of localStorage. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Cookie expiration mechanism

We know that both Expires and Max-age can set the expiration time of cookie, so what are the similarities and differences between the two?

The difference between expires and max-age

Expires sets the absolute value, which directly sets when the current cookie expires. As shown in the following figure, GMT format.

Expires has been defined in HTTP/1.0

Max-age is defined in HTTP/1.1. For backward compatibility, it is not enough to use max-age alone.

Setting an absolute value for Expires will cause problems in at least two aspects:

The problem of time out of sync between client and server. It is often shown that the time zone is different and the client time can be modified freely by the user.

It is easy to forget the specific expiration time after configuration, resulting in a surge in the coming expiration (my understanding should be the problem of mass updates at the same time).

Max-Age stands for time to live, recording a relative time (for example, 6000s), starting with the requet-time recorded by the server.

We see that in addition to the two values mentioned above, there is also session, which means that under the current connection, the data becomes invalid when the browser window is closed and the service is disconnected.

LocalStorage data expires

Localstorage itself does not have an expiration mechanism, but we can extend it by other means to meet our data expiration needs.

Requirements Analysis:

Pass in the past time by the way when saving the data

When obtaining data, determine whether it expires. Return undefined; if it expires, otherwise the data will be returned normally.

Hands-on practice

Both localStorage and sessionStorage inherit from the Storage object, so we can extend the Storage prototype method.

The setStorageWithAge (key, value, age) method receives three parameters, and the third parameter represents the maximum expiration time. We refer to the Max-Age implementation of cookie here and do it in relative time.

GetStorageWithAge (key), which directly determines whether the time expires and returns the corresponding value.

Code implementation:

Storage.prototype.setStorageWithAge = (key, value, age) = > {if (isNaN (age) | | age

< 1) throw new Error("age must be a number"); const obj = { data: value, //存储值 time: Date.now(), //存值时间戳 maxAge: age, //过期时间 }; localStorage.setItem(key, JSON.stringify(obj));};Storage.prototype.getStorageWithAge = key =>

{const {data, time, maxAge} = JSON.parse (localStorage.getItem (key)); if (time + maxAge)

< Date.now()) { localStorage.removeItem(key); return undefined; } return data;}; 尝试调用： localStorage.setStorageWithAge('amingxiansen', '测试过期时间', 30000);localStorage.getStorageWithAge('amingxiansen');

Set the expiration time of 30s and the results obtained before and after expiration.

These are all the contents of the article "how to achieve the expiration mechanism of localStorage". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.