Detailed explanation of the example of setting expiration time for Vue encapsulation localStorage

Encapsulate localStorage to set expiration time

1. Preface

In this example, weComponentsetupImported in the functionsetItemWithExpiryandgetItemWithExpiryfunctions, and use them inside the function to set and get the expiration timelocalStoragedata.

Please make sure toExport tool functions in the file and import them using the correct path. In addition, appropriate adjustments need to be made according to the actual project structure and needs.

localStorageThere is no built-in expiration time setting function. Stored inlocalStorageThe data in it will remain until it is explicitly deleted or the browser cache is cleared. If you want tolocalStorageSet the expiration time of the data in the setting, you need to implement this function manually.

You can store a timestamp while storing data, indicating the expiration time of the data. Then when accessing the data, check if the timestamp has expired and if it expires, delete the data.

1. Tools

Here is a simple example code that demonstrates how tolocalStorageExpiration time of data implementation:
When using Vue 3's Composition API, you can put the above in a namein the tool class. Here is an example:

// Set data with expiration time to localStorageexport function setItemWithExpiry(key, value, expirySeconds) {
  const now = new Date();
  const item = {
    value: value,
    expiry: () + (expirySeconds * 1000) // Convert expiration time to milliseconds  };
  (key, (item));
}
// Get data from localStorage and check if it is expiredexport function getItemWithExpiry(key) {
  const itemStr = (key);
  if (!itemStr) {
    return null;
  }
  const item = (itemStr);
  const now = new Date();
  if (() > ) {
    // The data has expired, delete and return null    (key);
    return null;
  }
  return ;
}

2. Import the tool class and use it

Then, in the Vue 3 component, you can usesetupFunction import and useTool functions in:

// 
<template>
  ...
</template>
<script>
import { setItemWithExpiry, getItemWithExpiry } from '@/utils/localStorageUtil';
export default {
  setup() {
    // Example usage    setItemWithExpiry('myData', { name: 'John' }, 3600); // Set the data and specify the expiration time to 3600 seconds (1 hour)    const data = getItemWithExpiry('myData'); // Get data    (data); // Output: { name: 'John' } or null (if the data has expired)    // Return the data and methods required by the component    return {
      data
    };
  }
};
</script>
<style>
...
</style>

In this example, weComponentsetupImported in the functionsetItemWithExpiryandgetItemWithExpiryfunctions, and use them inside the function to set and get the expiration timelocalStoragedata.

Please make sure toExport tool functions in the file and import them using the correct path. In addition, appropriate adjustments need to be made according to the actual project structure and needs.

This is the article about Vue encapsulation localStorage setting expiration time. For more related content on setting expiration time of Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!