一个用于不同页面上字段的本地存储JavaScript

三个不同的网页各有三个内容可编辑区域（

content1

、

content2

、和

content3

）

每个页面都链接到一个JavaScript，该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');
    }
}

使用

而不是

localStorage.userEdits1

---

脚本的实际问题是：

localStorage.userEdits1

要使用字符串（例如存储在变量中）访问对象的属性，必须使用括号表示法：

locationStorage[userEdits1]

但我会提出一个更通用的解决方案

将可编辑元素的内容存储在对象中

var缓存={
: ,
: ,
: ,
...
};

然后使用特定于页面的密钥将此“缓存”存储在本地存储器中

localStorage.setItem（window.location.pathName，JSON.stringify（缓存））；

一种可能的实施方式可以是：

window.addEventListener（'load'，checkEdits）；
getContentEditables（）.forEach（函数（可编辑）{
//这可防止函数在每次keyup事件上执行
//相反，它将仅在最后一次键控后100毫秒执行
var debouncedFunc=去盎司（100，函数（e）{
saveEdits（）；
});
可编辑。addEventListener（“键控”，debouncedFunc）；
});
函数checkEdits（）{
var cache=localStorage.getItem（window.location.pathName）；
如果（缓存！==null）{
cache=JSON.parse（cache）；
Object.keys（缓存）
.forEach（功能（键）{
var元素=document.getElementById（键）；
if（元素！==null）{
element.innerHTML=缓存[key]；
}
});
}
}
函数saveEdits（）{
var cache={}；
getContentEditables（）.forEach（函数（元素）{
cache[element.id]=element.innerHTML；
});
setItem（window.location.pathName，JSON.stringify（缓存））；
};
函数clearLocal（）{
如果（确认（'您确定要清除此页上的笔记吗？'））{
localStorage.removietem（window.location.pathName）；
getContentEditables（）.forEach（函数（元素）{
element.innerHTML=“”；
});
警报（“票据已清除”）；
}
}
//助手
函数getContentEditables（）{
var元素=[]；
document.querySelectorAll（“[contenteditable]”）
.forEach（函数（元素）{
if（element.id）{
元素。推（元素）；
}
});
返回元素；
}
函数去盎司（超时，func）{
var-timeoutId；
返回函数（）{
var=这个，
args=参数；
clearTimeout（timeoutId）；
timeoutId=setTimeout（函数（）{
函数应用（即，参数）；
}，超时）；
}
}

感谢您周到、详细的回复。代码完全按照我希望的那样工作，并将帮助我学到很多东西。

locationStorage[userEdits1]