Javascript 在每个设备上键入并保存注释

我正在做笔记页。我希望能够写笔记并保存它们。除了我只在一个浏览器中看到注释外，其他一切都很完美。例如，如果我在Safari上打开我的网站，我可以保存我的笔记，这样我就可以永远看到它们。但如果我在Chrome或手机上打开我的网站，便笺是空的。所以我需要重写所有内容并保存它。所以每次我想保存一些东西，我都需要在每台设备上重写同样的笔记，这太荒谬了。所以我想做的是让我的笔记在每台设备上都可见。我希望这是有道理的

我现在所拥有的：

<div class="logo">
  <h1>
    <a href="./">Notes</a>
  </h1>
    <img src="icon.svg">
</div>


<main contenteditable="" autocorrect="off"></main>

<div class="icon">
  <img src="icon-2-01.svg">
</div>

<button>Save</button>

<script src="main.js"></script>

var-button=document.querySelector（'button'）；
var main=document.querySelector（'main'）；
if（localStorage['note']==未定义）{
localStorage['note']='在此处键入并单击“保存”按钮保存您的备忘。
您也可以按CMD+S/CTRL+S'
}
函数siteLoad（）{
main.innerHTML=localStorage['note']；
}
函数按钮保存（）{
localStorage['note']=main.innerHTML；
}
功能键保存（e）{
if（e.keyCode==83&&e.metaKey | | e.keyCode==83&&e.ctrlKey）{
e、 预防默认值（）；
localStorage['note']=main.innerHTML；
}
}
if（window.addEventListener）{
window.addEventListener（'load'，siteLoad，false）；
addEventListener（'click'，buttonSave，false）；
main.addEventListener（'keydown'，keySave，false）；
}else if（窗口附件）{
window.attachEvent（'onload'，siteLoad）；
按钮。附件（'onclick'，buttonSave）；
main.attachEvent（'keydown'，keySave）；
}否则{
window.onload=siteLoad；
button.onclick=按钮保存；
main.onkeydown=keySave；
}

您可以将注释保存在中心位置（“服务器”）并从那里读取。是的，区域设置存储就是这样，它是此浏览器的本地存储。如果要存储多台设备，则需要一台服务器。你是如何主持你的网站，因为这会影响你有什么选择。谢谢。现在有道理了。

html {
  height: 100%;
}

body {
  font-size: 14px;
  font-family: Times New Roman;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 30px;
  background-color: #50554f;
  color: #FFF;
}

html {
  margin: 0;
}

h1 {
  top: 30px;
  right: -65px;
  font-size: 20px;
  position: relative;
}

a {
  text-transform: none;
  color: #FFF;
  text-decoration: none;
}

.logo {
  top: 10px;
  right: 10px;
  float: right;
}

.logo img {
  width: 220px;
  margin-top: -20px;
}

main {
  color: #FFF;
  display: block;
  height: calc(100% - 6.3em);
  overflow: scroll;
  outline: none;
}

.icon {
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.icon img {
  width: 50px;
  height: 50px;
}

button {
  font-size: 1em;
  margin-top: 80px;
  font-size: 14px;
  font-family: Times New Roman;
  color: #FFF;
  right: 30px;
  float: right;
}

button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

html {
  overflow: scroll;
}
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent; /* make scrollbar transparent */
}

@media (max-width:600px) {
  body {
    position: fixed;
  }
  
  .logo {
    display: block;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    margin-bottom: 50px;
  }
  
  h1 {
    margin-left: -130px;
  }
  
  main {
    width: 80%;
    height: calc(100% - 15em);
  }
  
  .icon {
    display: none;
  }
  
  button {
    position: relative;
    left: 1px;
    float: left;
  }
}

var button = document.querySelector('button');
var main = document.querySelector('main');

if (localStorage['note'] === undefined ) {
  localStorage['note'] = 'Save your note by typing in here and clicking the Save Button.<br>You can also press CMD + S / CTRL + S'
}

function siteLoad () {
  main.innerHTML = localStorage['note'];
}

function buttonSave () {
  localStorage['note'] = main.innerHTML;
}

function keySave (e) {
  if (e.keyCode === 83 && e.metaKey || e.keyCode === 83 && e.ctrlKey) {
    e.preventDefault();
    localStorage['note'] = main.innerHTML;
  }
}

if (window.addEventListener) {

  window.addEventListener('load', siteLoad, false);
  button.addEventListener('click', buttonSave, false);
  main.addEventListener('keydown', keySave, false);

} else if (window.attachEvent) {

  window.attachEvent('onload', siteLoad);
  button.attachEvent('onclick', buttonSave);
  main.attachEvent('keydown', keySave);

} else {
  
  window.onload = siteLoad;
  button.onclick = buttonSave;
  main.onkeydown = keySave;

}