Cookie, localStorage, sessionStorage, and IndexDB are compared to encapsulate the browser storage in general, preventing the browser storage from being unavailable in traceless mode, resulting in the failure to develop and save data

“This is the 8th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Based on contrast

  • cookie
    • Carried in a same-origin HTTP request and passed back and forth between the browser and the server
    • The data store size cannot exceed 4K
    • The cookie is valid until the expiration time is set
    • It is shared in all origin Windows
    • This mode is used to store identity information, such as AuthCode, during interaction with the server
  • localStorage
    • Persistent local storage that does not expire unless it is actively deleted
    • The storage size is 5M or larger
    • It is shared in all origin Windows
    • It is suitable for long-term login to determine whether the user has logged in; Save data for a long time and synchronize data with vuEX
  • sessionStorage
    • Only pages of the same session can be accessed, and the session will be cleared at the end of the session, valid only until the current browser window closes
    • The storage size is 5M or larger
    • Not shared between different browser Windows
    • Suitable for sensitive account one-time login
  • Browser database IndexDB
    • A browser provides a local database that allows storing large amounts of data, provides a lookup interface, and can be indexed
    • Key-value pair storage, asynchronous operation, transaction support
    • Large storage space

Non-trace limit

Symptom: After the Traceless mode is enabled in Safari, the localStorage and sessionStorage objects exist, but an error is reported when the set operation is performed on them. Cookies are available in traceless mode.

Error message: QuotaExceededError(code is 22, storage space is used up) The browser clears the memory of the storage and then sets the maximum value to 0

Solution: Encapsulate storage and define a global variable of Window, as follows:

// memorystorage.js Custom global storage
function MemoryStorage() {
  this._store = {};
}

MemoryStorage.prototype.setItem = function (key, val) {
  this._store[key] = String(val);
};
MemoryStorage.prototype.getItem = function (key) {
  return this._store.hasOwnProperty(key) ? this._store[key] : null;
};
MemoryStorage.prototype.removeItem = function (key) {
  delete this._store[key];
};
MemoryStorage.prototype.clear = function () {
  this._store = {};
};
export default MemoryStorage;
Copy the code
// sessionstorage.js is the default storage
import MemoryStorage from "./memoryStorage";

let sessionStorage;

// Check whether the default storage is available
if (navigator.cookieEnabled && window.sessionStorage) {
  sessionStorage = window.sessionStorage;
} else {
  sessionStorage = new MemoryStorage();
}

export default {
  set(key, val) {
    return sessionStorage.setItem(key, JSON.stringify(val));
  },
  get(key) {
    const val = sessionStorage.getItem(key);
    if (val === null) return null;
    try {
      return JSON.parse(val);
    } catch (e) {
      sessionStorage.removeItem(key);
      return null; }},remove(key) {
    return sessionStorage.removeItem(key);
  },
  clear() {
    returnsessionStorage.clear(); }};Copy the code

Reference Documents:

  • MDN Web Docs sessionStorage
  • Storage is disabled in Traceless Safari mode