Javascript 我可以刷新此页面而不丢失LI内容吗？

我希望能够将一个项目添加到列表中，并在重新加载页面时查看它。我不知道该怎么做。我不需要它存储在数据库或任何东西，我只希望它在屏幕上，直到我手动删除列表项。这可能吗

我相信这将保留在sharepoint上，并用于多个用户添加和编辑内容，但当我进入这一步时，我可能还需要其他帮助，如果这对当前保留LI信息的问题有任何影响的话

$（“ul”）。在（“单击”，“li”，函数（）上）{
$（此）.toggleClass（“已完成”）；
});
$（“ul”）。在（“单击”，“跨距”，功能（事件）{
$（this.parent（）.fadeOut（500，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text']”）。按键（函数（事件）{
if（event.which==13）{
var name=$（'#name'）.val（）；
$（'#name'）.val（“”）；
var number=$（'#number'）.val（）；
$（'#number'）.val（“”）；
var exception=$（'#exception'）.val（）；
$（'例外'）.val（“”）；
var date=$（'#date'）.val（）；
$（'日期'）.val（“”）；
$（“ul”）。追加（“
”+名称+“|”+编号+“|”+例外情况+“|”+日期+”
）
}
});
$（“.fa plus”）。单击（函数（）{
$（“输入[type='text']”）。fadeToggle（）；
});
正文{
字体系列：Roboto；
背景：-webkit线性梯度（90度，#2BC0E4 10%，#EAECC6 90%）；/*铬10+，Saf5.1+*/
背景：-moz线性梯度（90度，#2BC0E4 10%，#EAECC6 90%）；/*FF3.6+*/
背景：-ms线性梯度（90度，#2BC0E4 10%，#EAECC6 90%）；/*IE10*/
背景：-o型线性梯度（90度，#2BC0E4 10%，#EAECC6 90%）；/*Opera 11.10+*/
背景：线性梯度（90度，#2BC0E4 10%，#EAECC6 90%）；/*W3C*/
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0；
}
h1{
背景#2980b9；
颜色：白色；
保证金：0；
填充：10px 20px；
文本转换：大写；
字体大小：24px；
字体大小：正常；
}
法加{
浮动：对；
}
李{
背景：#fff；
高度：40px；
线高：40px；
颜色：#666；
}
李：第n个孩子（2n）{
背景：#f7f7f7；
}
跨度{
背景：#e74c3c；
高度：40px；
右边距：20px；
文本对齐：居中；
颜色：白色；
宽度：0；
显示：内联块；
过渡：0.2s线性；
不透明度：0；
}
李：悬停跨度{
宽度：40px；
不透明度：1.0；
}
输入{
字号：18px；
颜色：#2980b9；
背景色：#f7f7f7；
宽度：100%；
填充：13px 13px 13px 20px；
框大小：边框框；
边框：3倍实心rgba（0,0,0,0）；
}
输入：焦点{
背景：#fff；
边框：3px实心#2980b9；
大纲：无；
}
#容器{
宽度：360px；
保证金：100像素自动；
背景：#f7f7f7；
盒影：0.3pxRGBA（0,0,0,0.1）；
}
.完成{
颜色：灰色；
文字装饰：线条贯通；
}

例外情况
2223A例外情况

#303974 | R.Roberts | SN | 6/25-6/27
#303354 | B.Smith | SN | 6/15和6/27
#328937 | K.斯图尔|第| 6/26号

写得好的问题

改变

$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number +  " | " + exception + " | " + date + "</li>")

那会让你很接近的

编辑：我修改了您的JSFIDLE以实现此目标（添加一个新项）。您可以在这里找到它：
U确实可以使用localstorage，或者您可以使用JavaScript Cookie管理器。
唯一的缺点是，用户有一些控制权，因为他可以清除浏览器，从而清除本地存储和/或cookie

我仍然认为，对于这种情况，最好使用API调用并将这些数据保存在服务器端……
考虑使用本地存储或浏览器存储我觉得这样做可能不正确。我像你说的那样更改了代码，并在下面添加了第二个代码，现在它不会将新的列表项写入列表。我正要退出。我将能够在稍后（5-6小时）看到这一点。你能把你的努力放在JSFIDLE上吗？我从来没有做过JSFIDLE，我相信这是链接：请看编辑：和你的工作JSFIDLE在这里：-我们非常接近！我只是将初始加载代码移出事件处理程序以添加新记录。非常感谢！这很有效，但现在我还有最后一个问题。它在IE中可能不起作用，但在chrome中却起作用，这有什么原因吗？
let li = "<li><span><i class='fa fa-trash'></i></span> " + name + " | " + number +  " | " + exception + " | " + date + "</li>";
localStorage.setItem('li', localStorage.getItem('li') + li);
$("ul").append(li);

// assuming document.ready
let lis = localStorage.getItem('li');
$("ul").append(lis);