22 本地存储
发表更新软件开发 / HTML5 分钟读完 (大约684个字)

22 本地存储

在现代网页开发中，本地存储（Local Storage）是一个非常重要的概念，它允许你在用户的浏览器中存储数据。相比于 Cookie，本地存储 提供了更大的存储容量，且不随每个请求发送到服务器。

本地存储的基本概念

本地存储 是一种Web存储机制，允许你以键值对的形式在用户的浏览器中保存数据。它主要有以下两个接口：

  • localStorage：用于在用户的浏览器中持久性地保存数据，即使关闭浏览器，数据仍然存在。
  • sessionStorage：用于在会话中保存数据，当用户关闭浏览器窗口时数据丢失。

使用 localStorage

保存数据

要将数据存储在 localStorage 中，可以使用 setItem 方法。它接受两个参数：键和对应的值。

1
2
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('age', '30');

读取数据

使用 getItem 方法可以从 localStorage 中读取数据：

1
2
3
4
5
const username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

const age = localStorage.getItem('age');
console.log(age); // 输出: 30

删除数据

使用 removeItem 方法可以从 localStorage 中删除指定的项：

1
localStorage.removeItem('age');

清空所有数据

如果您想清空 localStorage 中的所有数据，可以使用 clear 方法：

1
localStorage.clear();

案例：用户设置保存

我们可以做一个简单的示例，利用 localStorage 来保存和读取用户的设置，例如用户名和主题偏好。

HTML 结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage 示例</title>
</head>
<body>
    <h1>欢迎！</h1>
    <label for="username">用户名:</label>
    <input type="text" id="username" placeholder="请输入用户名">
    <button id="save">保存设置</button>
    <button id="load">加载设置</button>
    <div id="output"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.getElementById('save').addEventListener('click', function() {
    const username = document.getElementById('username').value;
    localStorage.setItem('username', username);
    alert('设置已保存！');
});

document.getElementById('load').addEventListener('click', function() {
    const savedUsername = localStorage.getItem('username');
    if (savedUsername) {
        document.getElementById('output').innerText = `已保存的用户名: ${savedUsername}`;
    } else {
        document.getElementById('output').innerText = '没有保存的用户名。';
    }
});

代码解释

  • 当用户输入用户名并点击“保存设置”按钮时，用户名会被存储在 localStorage。
  • 点击“加载设置”按钮时，页面会从 localStorage 读取用户名并显示。

注意事项

  • localStorage 中存储的数据是以字符串形式保存的，因此如果你要存储对象，需要先进行 JSON 序列化，例如：
1
2
const user = { name: 'John Doe', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
  • 读取时需要进行反序列化：
1
const user = JSON.parse(localStorage.getItem('user'));

总结, localStorage 是一个简单且强大的工具，可以帮助你持久化用户数据及设置，提升用户体验。通过灵活地使用它，你可以更好地管理客户端的状态。

23 地理定位在HTML中的应用
发表更新软件开发 / HTML4 分钟读完 (大约674个字)

23 地理定位在HTML中的应用

在现代网页中，地理定位是一个非常重要的功能，它允许网站根据用户的地理位置提供定制化的服务。HTML本身并不提供地理定位的功能，但结合JavaScript和浏览器的Geolocation API，我们可以实现这一点。

使用 Geolocation API

Geolocation API 是一个允许用户浏览器获取其地理位置的接口。在使用之前，浏览器会请求用户的授权。

实现步骤

  1. 检查浏览器支持: 首先，必须检查用户的浏览器是否支持地理定位。
  2. 请求位置: 如果支持，则调用相关方法获取用户的地理位置。
  3. 处理用户的位置信息: 获取到位置后，可以进行各种操作，如显示在地图上或提供与用户位置相关的信息。

示例代码

以下是一个使用Geolocation API获取用户位置的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地理定位示例</title>
</head>
<body>
    <h1>获取用户位置</h1>
    <button id="get-location">获取位置</button>
    <p id="location">用户位置将显示在这里。</p>

    <script>
        document.getElementById('get-location').onclick = function() {
            // 检查浏览器是否支持 Geolocation
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                document.getElementById('location').innerText = "抱歉，您的浏览器不支持地理定位。";
            }
        };

        function showPosition(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            document.getElementById('location').innerText = `纬度: ${latitude}, 经度: ${longitude}`;
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    document.getElementById('location').innerText = "用户拒绝了地理定位请求。";
                    break;
                case error.POSITION_UNAVAILABLE:
                    document.getElementById('location').innerText = "位置不可用。";
                    break;
                case error.TIMEOUT:
                    document.getElementById('location').innerText = "请求位置超时。";
                    break;
                case error.UNKNOWN_ERROR:
                    document.getElementById('location').innerText = "发生未知错误。";
                    break;
            }
        }
    </script>
</body>
</html>

代码解析

  • 检查支持: if (navigator.geolocation)用来检查浏览器是否支持地理定位功能。
  • 获取位置: navigator.geolocation.getCurrentPosition()方法用于获取位置，并传入showPosition和showError作为回调函数。
  • 显示位置: 在showPosition函数中，使用coords.latitude和coords.longitude获取用户的经纬度，并将其显示在页面上。
  • 处理错误: showError函数处理不同的错误情况，比如用户拒绝、位置不可用等。

注意事项

  • 用户隐私: 用户的位置是敏感数据，在使用时一定要征得用户的同意。
  • HTTPS: 现代浏览器要求在HTTPS环境下才能使用地理定位功能。
  • 浏览器兼容性: 尽量测试不同浏览器，确保用户体验一致。

通过以上步骤，您可以轻松地在网页中添加地理定位功能，为用户提供更加个性化的服务。

24 HTML常见错误总结
发表更新软件开发 / HTML5 分钟读完 (大约737个字)

24 HTML常见错误总结

在学习HTML时，小白们常常会犯一些错误。了解这些错误，可以帮助你更快地掌握HTML的基本用法。以下是一些常见的HTML错误及其解决方案。

不正确的标签嵌套

HTML标签需要正确嵌套。常见错误是标签的打开和关闭不匹配。

例子

1
<p>这是一个段落<span>这是一个内联元素</p></span>

错误分析

在这个例子中，<span>标签未正确关闭。正确的方式是：

1
<p>这是一个段落<span>这是一个内联元素</span></p>

确保每个打开的标签都有相应的关闭标签，并且标签之间的嵌套必须符合逻辑。

忘记添加<!DOCTYPE>

<!DOCTYPE>声明可以帮助浏览器正确解析HTML文档的类型。如果忘记添加，浏览器可能使用“怪异模式”来渲染页面。

例子

1
2
3
4
5
6
7
8
<html>
<head>
    <title>示例</title>
</head>
<body>
    <h1>欢迎</h1>
</body>
</html>

正确写法

在文档的第一行添加<!DOCTYPE html>：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
</head>
<body>
    <h1>欢迎</h1>
</body>
</html>

这将确保文档以HTML5标准进行解析。

使用错误的引号

在HTML中，属性值需要用引号包裹，但常见的错误是混合使用单引号和双引号，或不使用引号。

例子

1
<img src=example.jpg alt='示例图片'>

错误修正

属性值使用一致的引号：

1
<img src="example.jpg" alt="示例图片">

不闭合的自闭合标签

HTML中有些标签是自闭合的，例如<img>和<br>。它们不需要关闭标签，但某些情况下不正确的闭合会导致渲染问题。

例子

1
2
<img src="image.jpg" alt="图片">
<br>

在HTML5中，以上写法是正确的，但在XHTML中，应该这样写：

1
2
<img src="image.jpg" alt="图片" />
<br />

错误使用大小写

HTML标签和属性对大小写不敏感，但保持一致性有助于提高代码可读性，尤其是在与CSS或JavaScript结合使用时。

例子

1
<DIV>内容</DIV>

建议修正

最好使用小写标签：

1
<div>内容</div>

错误的路径引用

常被忽视的是src属性、href属性等路径引用错误。路径不正确可能导致资源无法加载。

例子

1
<a href="page.html>点击这里</a>

正确写法

确保引号正确，并验证路径有效：

1
<a href="page.html">点击这里</a>

忽视语义化标签

使用不合适的标签可能会影响页面的可访问性和SEO优化。很多小白在使用时只考虑样式，而忽视了语义。

例子

错误使用<div>替代语义性标签：

1
<div class="header">这是标题</div>

建议修正

应使用适当的语义标签：

1
<header>这是标题</header>

通过这些总结，掌握HTML编写中的常见错误，可以帮助你写出更规范和有效的代码。保持对规范和最佳实践的关注，将大大提高你的网站质量。

链接

分类

最新文章

标签

AI必备微积分24
AI概率论25
AI线性代数28
Apache2网站部署24
C++77
CDN加速18
CSS31
C语言92
Django开发35
Flask开发30
GAN29
GenerativeAI33
HTML25
Hexo网站开发30
Java76
Javascript30
LangChain28
Markdown30
Matplotlib18
Node.js30
NumPy22
Pandas21
PyQt533
PyTorch31
Python78
React40
TensorFlow30
Vue39
数据分析18
数据挖掘20
机器学习24
深度学习24
神经网络后门攻击26
统计学24
计算机网络24
计算机视觉32
×