一個本地存儲的JavaScript在不同的頁面領域

Question

三種不同的網頁有每次三個CONTENTEDITABLE區域（content1，content2，並content3）。

每一個網頁鏈接到它使用本地存儲來存儲用戶的輸入，並在他們的迴歸再出現一個它的JavaScript。

當我更改一個頁面上的內容時，它會在同一個可編輯區域內的所有三個頁面中更改內容。

我希望每個頁面可以使用相同的腳本保存它是獨立於其他頁面自己的數據。

我已經嘗試添加網頁地址（URL）到本地存儲密鑰，讓每個頁面使用相同的腳本來存儲和檢索它自己的數據，但我不能得到它的工作。對JavaScript新手 - 感謝任何幫助。謝謝！

window.addEventListener('load', onLoad); 

function onLoad() { 
    checkEdits(); 
} 

// Get page location 
var loc = encodeURIComponent(window.location.href); 

// Add location to local storage key 
function checkEdits() { 
    if (localStorage.userEdits1 != null) { 
     var userEdits1 = (loc + userEdits1); 
     document.getElementById('content1').innerHTML = localStorage.userEdits1; 
    } 

    if (localStorage.userEdits2 != null) { 
     var userEdits2 = (loc + userEdits2); 
     document.getElementById('content2').innerHTML = localStorage.userEdits2; 
    } 

    if (localStorage.userEdits3 != null) { 
     var userEdits3 = (loc + userEdits3); 
     document.getElementById('content3').innerHTML = localStorage.userEdits3; 
    } 
}; 

document.onkeyup = function (e) { 
    e = e || window.event; 
    console.log(e.keyCode); 

    saveEdits(); 
}; 

function saveEdits() { 
    // Get editable elements 
    var editElem1 = document.getElementById('content1'); 
    var editElem2 = document.getElementById('content2'); 
    var editElem3 = document.getElementById('content3'); 

    // Get edited elements contents 
    var userVersion1 = editElem1.innerHTML; 
    var userVersion2 = editElem2.innerHTML; 
    var userVersion3 = editElem3.innerHTML; 

    // Add page location to storage key 
    var userEdits1 = (loc + userEdits1); 
    var userEdits2 = (loc + userEdits2); 
    var userEdits3 = (loc + userEdits3); 

    // Save the content to local storage 
    localStorage.userEdits1 = userVersion1; 
    localStorage.userEdits2 = userVersion2; 
    localStorage.userEdits3 = userVersion3; 
}; 

function clearLocal() { 
    if (confirm('Are you sure you want to clear your notes on this page?')) { 
     localStorage.setItem("userEdits1", ""); 
     localStorage.setItem("userEdits2", ""); 
     localStorage.setItem("userEdits3", ""); 

     document.getElementById('content1').innerHTML = ""; 
     document.getElementById('content2').innerHTML = ""; 
     document.getElementById('content3').innerHTML = ""; 

     alert('Notes cleared'); 
    } 
} 

Answer 1

腳本的實際問題是這樣的：

localStorage.userEdits1 

要使用字符串訪問對象的屬性（例如存儲在一個變量中）你已經使用括號標記：

locationStorage[userEdits1] 

不過，我想提出一個較籠統的（並且，恕我直言，清潔）解決方案......

商店可編輯元素的一個對象的內容

var cache = { 
    <elementX id>: <content>, 
    <elementY id>: <content>, 
    <elementZ id>: <content>, 
    ... 
}; 

，然後存儲在本地存儲此「緩存」與特定頁面鍵

localStorage.setItem(window.location.pathName, JSON.stringify(cache)); 

一種可能的實施方式可能是：

window.addEventListener('load', checkEdits); 
getContentEditables().forEach(function(editable) { 
    // This prevents the function to execute on every keyup event 
    // Instead it will only be executed 100ms after the last keyup 
    var debouncedFunc = debounce(100, function(e) { 
    saveEdits(); 
    }); 

    editable.addEventListener("keyup", debouncedFunc); 
}); 


function checkEdits() { 
    var cache = localStorage.getItem(window.location.pathName); 

    if (cache !== null) { 
    cache = JSON.parse(cache); 

    Object.keys(cache) 
     .forEach(function(key) { 
     var element = document.getElementById(key); 

     if (element !== null) { 
      element.innerHTML = cache[key]; 
     } 
     }); 
    } 
} 

function saveEdits() { 
    var cache = {}; 

    getContentEditables().forEach(function(element) { 
    cache[element.id] = element.innerHTML; 
    }); 

    localStorage.setItem(window.location.pathName, JSON.stringify(cache)); 
}; 

function clearLocal() { 
    if (confirm('Are you sure you want to clear your notes on this page?')) { 
    localStorage.removeItem(window.location.pathName); 

    getContentEditables().forEach(function(element) { 
     element.innerHTML = ""; 
    }); 

    alert('Notes cleared'); 
    } 
} 


// helper 
function getContentEditables() { 
    var elements = []; 

    document.querySelectorAll("[contenteditable]") 
    .forEach(function(element) { 
     if (element.id) { 
     elements.push(element); 
     } 
    }); 

    return elements; 
} 

function debounce(timeout, func) { 
    var timeoutId; 

    return function() { 
    var that = this, 
     args = arguments; 

    clearTimeout(timeoutId); 

    timeoutId = setTimeout(function() { 
     func.apply(that, args); 
    }, timeout); 
    } 
} 

Answer 2

使用

localStorage[userEdits1] 

而不是

localStorage.userEdits1