百度地图拖放文件存储

原创于 2022-12-22 21:47:25 发布 · 373 阅读

CC 4.0 BY-SA版权

文章标签：

这篇博客介绍了HTML5的地理定位接口Geolocation，包括获取用户位置、浏览器支持和使用示例。接着详细阐述了百度地图API的用途、JavaScript API的使用方法以及开发步骤。此外，还讲解了HTML5拖放API的概念、浏览器支持及拖拽事件处理。最后，探讨了Web Storage，包括localStorage和sessionStorage的特点、使用示例以及一个简单的网站列表程序的实现。

1 章节目录

1.1 目标

地理位置
百度地图 API

1.2 重点

地理位置
百度地图 API

1.3 难点

百度地图 API

2 地理位置

地理定位在日常生活中应用比较广泛，如互联网打车、在线地图等。

HTML5 增加了获取用户地理位置信息的接口 Geolocation，开发者可以通过经纬度来获取用户的地理位置信息。另外，百度等互联网公司也提供了地理定位的接口。

2.1 Geolocation 接口

Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置（经纬度），这将允许 Web 应用基于用户的地理位置提供定制的信息。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

2.2 浏览器支持

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pLkLaxJL-1671716694665)(MD文档.assets/geolocation-1.png)]

2.3 使用地理位置

2.3.1 获取当前位置

使用 getCurrentPosition() 方法来获取设备当前位置。

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gXz43V4S-1671716694666)(MD文档.assets/getCurrentPosition-1.gif)]

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地理位置</title>
	</head>
	<body>
		<p>点击按钮获取您当前位置：</p>
		<button onclick="getPosition()">点我</button>
		<p>您的位置是：</p>
		<p id="response"></p>
		<script>
			var response = document.getElementById('response');

			var options = {
				enableHighAccuracy: true, // 启用高精度
				timeout: 5000 // 定位超时时间，超时时间内一定返回结果
			}
			
			/**
			 * 获取地理位置
			 */
			function getPosition() {
				// 检测浏览器是否支持地理定位
				if (navigator.geolocation) {
					// 浏览器支持，获取地理位置
					navigator.geolocation.getCurrentPosition(success, error, options);
				} else {
					// 浏览器不支持，提示用户
					response.innerText = '您的浏览器不支持获取地理位置。';
				}
			}
			
			/**
			 * 获取成功
			 * @param {Object} result 返回的结果
			 */
			function success(result) {
				response.innerHTML = `纬度：${result.coords.latitude.toFixed(5)}<br />经度：${result.coords.longitude.toFixed(5)}`;
			}
			
			/**
			 * 获取失败
			 * @param {Object} error 异常信息
			 */
			function error(error) {
				console.log(error);
			}
		</script>
	</body>
</html>

2.3.2 返回数据

若获取地理位置成功，则 getCurrentPosition() 方法将返回数据对象。对象可能包含的属性如下：

属性	描述
coords.latitude	以十进制度数表示纬度的双精度值。
coords.longitude	以十进制度数表示经度的双精度值。
coords.accuracy	表示纬度和经度属性精度的双精度值，单位为米。
coords.altitude	表示该位置相对于海平面的高度的双经度值。如果无法提供数据，则此值可以为空。
coords.altitudeAccuracy	表示高度属性精度的双精度值，单位为米。
coords.heading	表示设备运行方向的双精度值。该值（以度为单位）表示设备离正北方向的距离。0° 表示正北方向，顺时针计算（即东为 90°，西为 270°）。如果速度为 0，此值为 NaN；如果设备无法提供方向信息，则此值为空。
coords.speed	表示设备运行速度的双精度值，单位为米/每秒。
timestamp	获取到位置的时间（时间戳）。

2.3.3 异常处理

getCurrentPosition() 方法的第二个参数用于处理错误。它规定获取地理位置失败或用户拒绝定位时运行的函数。

可能返回的错误码：

值	相关联的常量	描述
1	PERMISSION_DENIED	地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。
2	POSITION_UNAVAILABLE	地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。
3	TIMEOUT	获取地理位置超时，通过定义 `PositionOptions.timeout` 来设置获取地理位置的超时时长。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地理位置</title>
	</head>
	<body>
		<p>点击按钮获取您当前位置：</p>
		<button onclick="getPosition()">点我</button>
		<p>您的位置是：</p>
		<p id="response"></p>
		<script>
			var response = document.getElementById('response');

			var options = {
				enableHighAccuracy: false, // 启用高精度
				timeout: 5000 // 定位超时时间，超时时间内一定返回结果
			}

			/**
			 * 获取地理位置
			 */
			function getPosition() {
				// 检测浏览器是否支持地理定位
				if (navigator.geolocation) {
					// 浏览器支持，获取地理位置
					navigator.geolocation.getCurrentPosition(success, error, options);
				} else {
					// 浏览器不支持，提示用户
					response.innerText = '您的浏览器不支持获取地理位置。';
				}
			}

			/**
			 * 获取成功
			 * @param {Object} result 返回的结果
			 */
			function success(result) {
				response.innerHTML = `纬度：${result.coords.latitude.toFixed(5)}<br />经度：${result.coords.longitude.toFixed(5)}`;
			}

			/**
			 * 获取失败
			 * @param {Object} error 异常信息
			 */
			function error(error) {
				switch (error.code) {
					case error.PERMISSION_DENIED:
						response.innerText = '没有获取地理位置信息的权限。';
						break
					case error.POSITION_UNAVAILABLE:
						response.innerText = '地理位置获取失败。';
						break;
					case error.TIMEOUT:
						response.innerText = '获取地理位置超时。';
						break;
					default:
						break;
				}
			}
		</script>
	</body>
</html>

3 百度地图 API

3.1 百度地图的作用

百度地图开放平台是面向广大政府、企业、互联网等开发者开放地图服务的平台。

百度地图开放平台拥有七大基础地图服务开放能力：定位、地图、导航、轨迹、路况、路线规划、搜索，并将七大服务能力开放给各行业开发者使用。

百度地图开放平台目前已覆盖近百个行业领域，主要应用场景有：智能物流、智能穿戴、网约车、车用地图、智能景区等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ol5X9okM-1671716694666)(MD文档.assets\baidu-1.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OFCdHdWY-1671716694666)(MD文档.assets\baidu-2.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r1hQRUCP-1671716694667)(MD文档.assets\baidu-3.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W8N7Ikj6-1671716694667)(MD文档.assets\baidu-4.jpg)]

3.2 百度地图 JavaScript API

百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持 PC 端和移动端基于浏览器的地图应用开发，且支持 HTML5 特性的地图开发。

百度地图 JavaScript API 支持 HTTP 和 HTTPS，免费对外开放，可直接使用。接口使用无次数限制。

官方开发文档：https://lbsyun.baidu.com/index.php?title=jspopular3.0。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ISOwGOI5-1671716694667)(MD文档.assets\jsapi-1.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5OSosPRO-1671716694667)(MD文档.assets\jsapi-2.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TUMQTaSS-1671716694668)(MD文档.assets\jsapi-3.jpg)]

3.3 百度地图开发步骤

我们将以基础的地图展示和地图标注为例，来学习百度地图 JavaScript API 的使用方法。

3.3.1 申请开发密钥

点击链接进入控制台：https://lbsyun.baidu.com/apiconsole/center#/home。

点击左侧菜单，依次进入：应用管理 → 我的应用，在页面中点击“创建应用”。

复制开放平台生成的访问应用的 AK：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MN1gjkSM-1671716694668)(MD文档.assets\develop-2.jpg)]

3.3.2 加载 JavaScript API

新建开发页面，参考使用须知异步加载 JavaScript API，并填入你刚才申请到的 AK（密钥）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度地图</title>
		<style>
			#map { width: 800px; height: 600px; }
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
			// 初始化地图
			function initialize() {  
			  var map = new BMap.Map('map');  
			  map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  
			}  
			
			// 加载 JavaScript API
			function loadScript() {  
			  var script = document.createElement("script");  
			  script.src = "https://api.map.baidu.com/api?v=2.0&ak=mETWRRt2iKZmAomVO0WhohX32tPGTUtC&callback=initialize";
			  document.body.appendChild(script);
			}
			
			window.onload = loadScript;
		</script>
	</body>
</html>

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qy1t3whU-1671716694668)(MD文档.assets\develop-4.jpg)]

3.3.3 修改初始坐标位置

地图在加载时，需要通过脚本设置地图初始化时的中心点坐标位置，例如示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 中的 121.491, 31.233。如果需要修改该位置，可以通过坐标拾取器获取目标位置的坐标：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sTBaZKi6-1671716694668)(MD文档.assets\develop-3.jpg)]

示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 中的 11 是指地图层级，取值范围 4 ~ 19。层级取值越大，地图比例尺越小。

修改后的代码如下：

// 初始化地图
function initialize() {  
  var map = new BMap.Map('map');  
  map.centerAndZoom(new BMap.Point(113.839158, 34.729169), 12);
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PYFwfXLr-1671716694668)(MD文档.assets\develop-5.jpg)]

3.3.4 添加地图控件

初始化后的地图默认是不能进行缩放的，需要自行添加地图控件。

示例代码：

// 初始化地图
function initialize() {
  var map = new BMap.Map('map');
  map.centerAndZoom(new BMap.Point(113.839158, 34.729169), 12);
  
  map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
  map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
  map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0YTuQH52-1671716694669)(MD文档.assets\develop-6.jpg)]

3.3.5 添加标注

可以使用 map.addOverlay 方法向地图添加标注，并且向地图中添加信息窗口。

示例代码：

// 初始化地图
function initialize() {
	var point = new BMap.Point(113.839158, 34.729169);
	var map = new BMap.Map('map');
	map.centerAndZoom(point, 12);
    
	map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
    
	var marker = new BMap.Marker(point); // 创建标注
	map.addOverlay(marker); // 将标注添加到地图中
    
	var opts = {
		width: 240,
		height: 80,
		title: `厚溥IT`
	}
	var infoWindow = new BMap.InfoWindow('河南省郑州市经济技术开发区航海东路中兴新业港51号楼', opts); // 创建信息窗口对象
	marker.addEventListener('click', function() {
		map.openInfoWindow(infoWindow, point); // 打开信息窗口
	})
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9NT5YIme-1671716694669)(MD文档.assets\develop-7.jpg)]

3.3.6 出行路线规划

百度地图 JavaScript API 提供了驾车、公交、步行和骑行四种出行方式的路线规划功能。

我们将以驾车为例，演示获取用户当前定位，以及到厚溥 IT 的驾车路线规划：

// 初始化地图
function initialize() {
	var point = new BMap.Point(113.839158, 34.729169); // 目标地理位置
	var map = new BMap.Map('map');
	map.centerAndZoom(point, 12);
	map.enableScrollWheelZoom(true); // 启用滚轮缩放
    
	map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
    
	var marker = new BMap.Marker(point); // 创建标注
	map.addOverlay(marker); // 将标注添加到地图中
	var opts = {
		width: 240,
		height: 80,
		title: `厚溥IT`
	}
    
	var infoWindow = new BMap.InfoWindow('河南省郑州市经济技术开发区航海东路中兴新业港51号楼', opts); // 创建信息窗口对象
	marker.addEventListener('click', function() {
		map.openInfoWindow(infoWindow, point); // 打开信息窗口
	})
    
	var geolocation = new BMap.Geolocation();
	geolocation.enableSDKLocation(); // 开启SDK辅助定位
	geolocation.getCurrentPosition(function(result) {
		if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			var current = result.point; // 当前地理位置
			var driving = new BMap.DrivingRoute(map, {
				renderOptions: {
					map: map,
					autoViewport: true
				}
			});
			driving.search(current, point); // 驾车路线规划
		}
	})
}

示例效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sRnutIDe-1671716694669)(MD文档.assets\develop-8.jpg)]

百度地图 SDK 辅助定位可兼容 Chrome 浏览器，但定位精度可能欠佳（ HTTP 请求下基于 IP 地址定位）。

4 章节总结

地理位置
百度地图 API

1 章节目录

1.1 目标

拖放 API
拖拽事件

1.2 重点

无

1.3 难点

拖拽事件

2 拖放 API

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-396tYedD-1671716742081)(MD文档.assets\drag-1.gif)]

在开发中，我们经常使用原生的 JavaScript 来实现拖放效果，实现起来比较复杂。如何让实现拖放效果变得简单呢？HTML5 为我们提供了更好用的接口和事件，在很大程度上降低了页面中拖放交互的实现难度。

2.1 拖放的概念

拖放的概念：拖放（Drag 和 drop）是 HTML5 标准的组成部分，是页面中的元素从初始位置被拖动到新的位置的用户行为，如拖拽页面中的指定元素到另一个元素中。

拖放过程：首先使用鼠标指针进入源对象，然后按住鼠标左键拖动源对象，当移动鼠标时源对象会跟随鼠标指针移动，如果源对象进入了目标对象，就松开鼠标左键让源对象放置在目标对象中。

源对象：表示被拖动的元素。为元素添加 draggable 属性可以设置此元素为源对象。

目标对象：源对象进入的元素称作目标对象，目标对象可以是页面中的任一元素。

2.2 拖放的浏览器支持

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t7yOM2nz-1671716742082)(MD文档.assets/drag-2.png)]

3 拖拽事件

HTML 的 drag & drop 使用了 DOM event model 以及从 mouse events 继承而来的 drag events。

一个典型的拖拽操作是这样的：用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable）元素，然后释放鼠标。在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如 drag 和 dragover 事件类型）。

下面的表格提供了一个简短的事件类型描述：

事件	On 型事件处理程序	触发时刻
drag	ondrag	当拖拽元素或选中的文本时触发。
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发。
dragenter	ondragenter	当拖拽元素或选中的文本到一个可释放目标时触发。
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。
dragleave	ondragleave	当拖拽元素或选中的文本离开一个可释放目标时触发。
dragstart	ondragstart	当用户开始拖拽一个元素或选中的文本时触发。
dragend	ondragend	当拖拽操作结束时触发（比如松开鼠标按键或敲 “Esc” 键）。

下面通过一个简单的示例来讲解拖放事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽事件</title>
		<style>
			.box {
				width: 262px;
				height: 46px;
				padding: 15px;
				border: 2px solid #aaaaaa;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
			<img id="logo" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="262" height="46">
		</div>
		<br />
		<div id="div2" class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<script>
			function allowDrop(ev) {
				ev.preventDefault();
			}

			function drag(ev) {
				ev.dataTransfer.setData("text/plain", ev.target.id);
			}

			function drop(ev) {
				ev.preventDefault();
				var id = ev.dataTransfer.getData("text/plain");
				ev.target.appendChild(document.getElementById(id));
			}
		</script>
	</body>
</html>

它看上去也许有些复杂，不过我们可以分别研究拖拽事件的不同部分。

3.1 设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

3.2 拖动什么 - ondragstart 和 setData()

在上面示例中，ondragstart 属性调用了一个函数 drag(ev)，它规定了被拖动的数据。

DataTransfer 对象专门用来存储拖放时要携带的数据，它可以被设置为拖放事件对象的 dataTransfer 属性。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev) {
	ev.dataTransfer.setData("text/plain", ev.target.id);
}

text/plain 是一个 DOMString，表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id：logo。

3.3 拖放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

function allowDrop(ev) {
	ev.preventDefault();
}

3.4 进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数 drop(event)：

function drop(ev) {
	ev.preventDefault();
	var id = ev.dataTransfer.getData("text/plain");
	ev.target.appendChild(document.getElementById(id));
}

4 章节总结

拖放 API
拖拽事件

1 章节目录

1.1 目标

Web Storage 介绍
localStorage 的使用
sessionStorage 的使用
简单的网站列表程序

1.2 重点

localStorage 的使用
sessionStorage 的使用

1.3 难点

localStorage 的使用
sessionStorage 的使用

2 Web Storage 介绍

2.1 Web Storage 简介

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性地在设备上存储本地数据，例如记录历史活动信息。传统方式使用 document.cookie 来进行存储，但是由于其存储的空间只有 4KB 左右，并且需要复杂的操作进行解析，给发开者带来诸多不便。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JsvOjMLu-1671716766466)(MD文档.assets\webstorage-1.jpg)]

为此，HTML5 规范提出了本地存储的解决方案。

HTML5 的本地存储解决方案中定义了两个重要的API：Web Storage 和本地数据库 Web SQL Database。接下来我们将重点讲述 Web Storage 的基本用法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dauWqPdK-1671716766467)(MD文档.assets/webstorage-2.png)]

localStorage：用于长久保存整个网站的数据，保存的数据没有期限，直到手动去除。
sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口（或标签页）之后将会删除这些数据。

2.2 Web Storage 的特点

设置数据和读取数据比较方便。
容量较大，sessionStorage 约 5M，localStorage 约 20M。
只能存储字符串，如果要存储 JSON 对象，可以使用 window.JSON 对象的 stringify() 方法和 parse() 方法进行序列化和反序列化。

2.3 Web Storage 的浏览器支持

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5UJym87a-1671716766467)(MD文档.assets/webstorage-3.png)]

在使用 Web Storage 前，应检查浏览器是否支持 localStorage 和 sessionStorage：

if (typeof(Storage) !== 'undefined') {
	console.log('支持 localStorage、sessionStorage 对象');
	// 一些代码......
} else {
	console.log('抱歉，不支持 web 存储');
}

3 localStorage 的使用

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

不管是 localStorage，还是 sessionStorage，可使用的 API 方法和属性都相同：

方法和属性	描述
setItem(key, value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名已存在，则更新其对应的值。
getItem(key)	该方法接收一个键名作为参数，返回键名对应的值。
removeItem(key)	该方法接收一个键名作为参数，并把该键名和值从存储中删除。
length	类似数组的 length 属性，用于访问 Storage 对象中 item 的数量。
key(n)	用于访问第 n 个 key 的名称。
clear()	清除当前域下的所有键值对。

示例 1，存储和移除字符串：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>存储和移除字符串</title>
	</head>
	<body>
		<button onclick="save()">存储</button>
		<button onclick="read()">读取</button>
		<button onclick="remove()">移除</button>
		<p>存储的值：<span id="result"></span></p>
		<script>
			function save() {
				// 存储字符串
				localStorage.sitename = '百度一下';
			}

			function read() {
				// 读取字符串
				document.getElementById('result').innerText = localStorage.sitename;
			}

			function remove() {
				// 移除字符串
				localStorage.removeItem('sitename');
			}
		</script>
	</body>
</html>

键/值对通常以字符串存储，你可以按自己的需要转换该格式。

示例 2，存储用户点击次数：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>存储用户点击次数</title>
	</head>
	<body>
		<button onclick="btnClick()">按钮</button>
		<p>点击次数：<span id="result"></span></p>
		<script>
			var hits = 0;
			var result = document.getElementById('result');
			
			// 页面加载事件
			window.onload = function() {
				// 读取本地存储的点击次数
				var str = localStorage.getItem('hits');
				if (str) {
					hits = parseInt(str);
				}
				result.innerText = hits;
			}

			// 按钮点击事件
			function btnClick() {
				hits = hits + 1; // 次数+1
				localStorage.setItem('hits', hits); // 存储
				result.innerText = hits;
			}
		</script>
	</body>
</html>

代码中的字符串值转换为数字类型。

4 sessionStorage 的使用

sessionStorage 方法针对一个 session（会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
		<style>
			input[type="number"] {
				width: 30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<span>计数器：</span>
		<button onclick="add()">+</button>
		<input type="number" id="result" value="0" readonly="readonly" />
		<button onclick="sub()">-</button>
		<script>
			var number = 0;
			var result = document.getElementById('result');

			// 页面加载事件
			window.onload = function() {
				if (typeof(Storage) !== 'undefined') {
					// 读取本地存储的数量
					var str = sessionStorage.getItem('number');
					if (str) {
						number = parseInt(str);
						result.value = number;
					}
				}
			}

			// 加数量
			function add() {
				number = number + 1;
				sessionStorage.setItem('number', number); // 存储
				result.value = number;
			}

			// 减数量
			function sub() {
				if (number == 0) {
					return;
				}
				number = number - 1;
				sessionStorage.setItem('number', number); // 存储
				result.value = number;
			}
		</script>
	</body>
</html>

5 简单的网站列表程序

功能需求：

可以输入网站名、网址，以网站名作为 key 存入 localStorage；
可以输入网站名，查找网址；
可以列出当前已保存的所有网站。

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单的网站列表程序</title>
		<style>
			.box {
				width: 300px;
				padding: 15px 20px;
				border: 1px dotted #cccccc;
				margin: 20px 0;
			}
			
			table {
				border-collapse: collapse;
			}
			
			table td {
				padding: 4px 8px;
				border: 1px solid #cccccc;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div>
				名称：<input type="text" id="input-name" value="" placeholder="请输入名称" />
			</div>
			<div>
				网址：<input type="text" id="input-site" value="" placeholder="请输入网址" />
			</div>
			<div>
				<button onclick="add()">添加</button>
			</div>
		</div>
		<div class="box">
			<div>
				名称：<input type="text" id="search-name" value="" placeholder="请输入名称" />
			</div>
			<div>
				<button onclick="search()">搜索</button>
			</div>
			<div>
				<button onclick="searchAll()">查看所有</button>
			</div>
		</div>
		<div class="box">
			<div>结果：</div>
			<div id="result">暂未查询到任何数据</div>
		</div>
		<script>
			var inputName = document.getElementById('input-name');
			var inputSite = document.getElementById('input-site');
			var searchName = document.getElementById('search-name');
			var result = document.getElementById('result');

			// 添加
			function add() {
				var name = inputName.value;
				if (!name) {
					alert('请输入名称！');
					return;
				}
				var site = inputSite.value;
				if (!site) {
					alert('请输入网址！');
					return;
				}
				localStorage.setItem(name, site);
				alert('添加成功！');
				inputName.value = '';
				inputSite.value = '';
			}

			// 搜索
			function search() {
				var name = searchName.value;
				if (!name) {
					result.innerText = '暂未查询到任何数据';
				} else {
					var site = localStorage.getItem(name);
					if (!site) {
						result.innerText = '暂未查询到任何数据';
					} else {
						var elementStr = '<table>'
						elementStr += '<tr><td>名称</td><td>网址</td></tr>';
						elementStr += `<tr><td>${name}</td><td>${site}</td></tr>`;
						elementStr += '</table>';
						result.innerHTML = elementStr;
					}
				}
			}

			// 查看所有
			function searchAll() {
				console.log(localStorage.length);
				if (localStorage.length > 0) {
					var elementStr = '<table>'
					elementStr += '<tr><td>名称</td><td>网址</td></tr>';
					for (var i = 0; i < localStorage.length; i++) {
						var name = localStorage.key(i);
						var site = localStorage.getItem(name);
						elementStr += `<tr><td>${name}</td><td>${site}</td></tr>`;
					}
					elementStr += '</table>';
					result.innerHTML = elementStr;
				} else {
					result.innerText = '暂未查询到任何数据';
				}
			}
		</script>
	</body>
</html>