巧解Safari无痕模式下storage被禁用问题，解锁无忧存储

前端

2024-01-19 01:36:27

Safari 无痕模式下 Storage 的优雅解决方案

问题：Safari 无痕模式下 Storage 被禁用

在 Safari 浏览器中，当您开启无痕模式时，localStorage 和 sessionStorage 将被禁用。这意味着您无法使用这些存储机制来保存数据。当您尝试对 storage 进行设置操作时，还会收到错误提示。

巧妙的解决方案：封装 Storage 实现无忧存储

为了解决 Safari 无痕模式下 storage 被禁用问题，我们可以对 storage 进行一层封装。这样，当我们遇到开启无痕模式的情况时，就可以通过封装层来处理存储操作，从而避免报错。

封装方法详解

创建封装层： 首先，我们需要创建一个封装层，该封装层可以对 storage 进行操作。这个封装层可以是一个函数或一个类。

判断 Storage： 在封装层中，我们需要对 storage 进行判断，以确定当前是否处于无痕模式。我们可以通过以下代码来判断：

if (window.localStorage) {
  // storage 可用
} else {
  // storage 不可用
}

选择存储方式： 如果当前处于无痕模式，那么我们就需要选择其他方式来存储数据。我们可以使用 cookie 或 indexedDB 来实现存储。

实现数据存储： 无论选择哪种存储方式，我们都需要实现数据存储的功能。我们可以通过以下代码来实现：

// 使用 localStorage 存储数据
localStorage.setItem('key', 'value');

// 使用 cookie 存储数据
document.cookie = 'key=value';

// 使用 indexedDB 存储数据
indexedDB.open('myDB', 1, function(db) {
  var tx = db.transaction('myStore', 'readwrite');
  var store = tx.objectStore('myStore');
  store.put({ key: 'value' });
});

实现数据读取： 我们还需要实现数据读取的功能。我们可以通过以下代码来实现：

// 从 localStorage 读取数据
var value = localStorage.getItem('key');

// 从 cookie 读取数据
var value = document.cookie.replace(/(?:(?:^|.*;\s*)key\s*\=\s*([^;]*).*$)|^.*$/, '$1');

// 从 indexedDB 读取数据
indexedDB.open('myDB', 1, function(db) {
  var tx = db.transaction('myStore', 'readonly');
  var store = tx.objectStore('myStore');
  store.get('key').onsuccess = function(event) {
    var value = event.target.result;
  };
});