使用Localstorage(Mapty)
- 首先，我们创建一个函数名，先在app中去调用它
// 为所有的锻炼创建本地存储
this._setLocalStorage();
- 之后我们就开始编写这个函数的功能
_setLocalStorage() {
localStorage.setItem('workouts', JSON.stringify(this.#workouts));
}
注：代码解释： _setLocalStorage() {
localStorage.setItem('workouts', JSON.stringify(this.#workouts));}
本地存储API在现实使用的尽量减少使用，它不仅是明文的，而且随着数据越来越多，你的性能也就会越来越慢
- 现在我们已经实现了将运动数据存储起来，现在我们需要在加载的使用去获取本地存储数据，显然这个是在构造函数中去调用，还是一样，现在创建一个函数直接去调用，后面我们在实现函数功能
class App {
#map;
#mapZoomLevel = 13;
#mapEvent;
#workouts = [];
constructor() {
// 获取用户定位
this._getPosition();
//从本地存储中获取数据。一开始就会执行
this._getLocalStorage();
// Attach event handlers
form.addEventListener('submit', this._newWorkout.bind(this));
inputType.addEventListener('change', this._toggleElevationField);
containerWorkouts.addEventListener('click', this._moveToPopup.bind(this));
}
- 接着我们来实现这个函数的功能
_getLocalStorage() {
const data = JSON.parse(localStorage.getItem('workouts')); //将数据存储变量中
if (!data) return; //如果数据不存在的话，简单返回
this.#workouts = data;//刚开始，workout数组都是空的，即将本地存储设置为锻炼数组
this.#workouts.forEach(work => { //通过循环数组的方式将锻炼数据展现在侧边栏
this._renderWorkout(work);
});
}
现在刷新浏览器数据就会进行存储
如何清除存储数据
reset() {
localStorage.removeItem('workouts');
location.reload();
}
当我们在浏览器中输入ap.reset();调用此方法，浏览器本地存储的数据就会被清除；
致此关于这个小项目的DEMO就结束了；
关于此小项目后续的可实现附加功能
-
在用户界面添加编辑锻炼的功能
-
在用户界面添加删除锻炼的功能
-
在用户界面添加删除所有锻炼的功能
-
能够按特定字段对锻炼进行排序（比如按照距离、时间）PS：此功能可能有些难度
-
重构跑步和骑行的数据在本地存储中的数据
-
更真实的错误和确认消息，目前只实现了简单的弹窗功能
-
能够定位地图以显示所有锻炼（难度功能）
-
能够根据锻炼点单独绘制线条和形状
-
从坐标获取位置（“运行在中国北京”）PS:仅在异步 JavaScript 部分之后
-
显示锻炼时间和地点的天气数据。PS仅在异步 JavaScript 部分之后
