本文展示了如何使用HTML和JavaScript实现数据的本地缓存及页面加载时自动恢复数据。通过点击按钮缓存JavaScript数组list到LocalStorage，然后在页面加载时调用Onloader函数，利用正则表达式解析存储的字符串并重新填充list数组，确保数据的持久化与自动加载。
直接上我的案例代码：
HTML
<button @click="huancun()"> 缓存数据 </button>
<!--每次点击按钮缓存数据-->
JavaScript
list:["写代码","吃饭饭","睡觉觉"];
huancun:function(){
localStorage.setItem("s",JSON.stringify(this.list));
}
//以上将数组list以字符串形式存储到了本地的Local Storage
对于我的案例来说，在每次页面打开时，实现自动加载list数据，方法如下：
HTML
<body onload="Onloader()">
</body>
<!--加上这个每次页面打开就自动调用Onloader方法了-->
JavaScript
Onloader:function(){
this.list = [];
var a = localStorage.getItem("s");
let regex = /"([^"]*)"/g;
let currentResult;
let results = [];
while ((currentResult = regex.exec(a)) !== null){
this.list.push(currentResult[1]);
}
}
//利用正则表达式取出“”之间的字符串，之后再放回list数组中。
//this.list = []; 实现打开页面时加载上次缓存到Local Storage的数据。没有的话每次页面打开都会加上初始数据。
2782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
