Un emplacement de stockage local JavaScript pour les zones de différentes pages

Question

Trois pages Web différentes ont chacune trois zones pouvant être traitées (content1, content2 et content3).

Chaque page est liée à un JavaScript qui utilise le stockage local pour stocker les entrées de l'utilisateur et les présenter de nouveau à leur retour.

Lorsque je modifie le contenu d'une page, il modifie le contenu de la même zone modifiable sur les trois pages.

Je souhaite que chaque page puisse utiliser le même script pour enregistrer ses propres données indépendamment des autres pages.

J'ai essayé d'ajouter l'emplacement de page (url) à la clé de stockage local, pour que chaque page utilise le même script pour stocker et récupérer ses propres données, mais je n'arrive pas à le faire fonctionner. Je suis nouveau à JavaScript - serait reconnaissant pour toute aide. Merci!

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

Le problème réel de votre script est la suivante:

localStorage.userEdits1 

Pour accéder à la propriété d'un objet avec une chaîne (par exemple, stocké dans une variable) vous ha ai utiliser la notation de support:

locationStorage[userEdits1] 

Mais je propose une solution un peu plus générique (et, IMHO, plus propre) ...

stocker le contenu des éléments modifiables dans un objet

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

Et puis stocker cette "cache" dans le stockage local avec une clé spécifique à la page

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

Une mise en œuvre possible pourrait être:

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

Utilisez

localStorage[userEdits1] 

Au lieu de

localStorage.userEdits1