【JavaScript】向脚本引入api/localStorage

向脚本引入api

leaflet
有多种方式，这里使用向html添加cdn链接
向html引入js时，不要直接引入，使用defer或async会效率更高
记得按序引入，自己的文件放下面，这样所有全局变量即便在不同文件中，也可以直接被访问到

	<link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <script
      defer
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <!--记得按序-->
    <script defer src="script.js"></script>

使用navigator.geolocation获取自己所在位置
navigator.geolocation.getCurrentPosition()传入两个func，一个是成功获取后的方法，一个是失败的
这里示例直接复制了leaflet首页代码
这里需要向html添加id为map的标签
L像是一个入口，其中有许多方法，就像国际化api：Intl
在窗口打印L：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        function (position) {
            const { latitude } = position.coords;
            const { longitude } = position.coords;
            console.log(latitude, longitude);
            const coords = [latitude, longitude]
            
			//L像是一个入口，其中有许多方法
			//这里将经纬改为自己的，13是地图初始缩放大小
            const map = L.map('map').setView(coords, 13);

            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
			//制作一个标点
            L.marker(coords).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();
        },
        function () {
            alert('Could not get your position');
        }
    )
}

控制localStorage存储

存储

向其中存储key，value（均需要为字符串）
调用api：localStorage.setItem
第二个属性为一个对象，可使用JSON.stringify方法

 localStorage.setItem('workouts', JSON.stringify(this.#workouts));

获取

使用 localStorage.getItem

//解析JSON串
const data = JSON.parse(localStorage.getItem('workouts'));

需要注意此时获取到的对象只是普通对象，并没有之前自定义的原型链

清除

localStorage.removeItem('workouts');

小tip

使用 location.reload(); 刷新界面