HTML5-本地存储浅谈,HTML表单标签
HTML5提供了一种机制,可以使得网页可以在用户的浏览器中本地保存数据。这就是所谓的“本地存储”。
HTML5本地存储可以分为两种类型:
- localStorage - 用于长久保存整个网站的数据,保存的数据没有时间限制。
- sessionStorage - 用于临时保存某个网站的数据,在浏览器关闭后会被清除。
这两种方式都可以保存字符串。如果你想保存对象,你需要将对象转换为JSON字符串。
以下是一些使用localStorage和sessionStorage的例子:
- 使用localStorage保存数据:
<script>
// 保存数据
localStorage.setItem("key", "value");
// 读取数据
var data = localStorage.getItem("key");
console.log(data); // 输出 "value"
</script>
- 使用sessionStorage保存数据:
<script>
// 保存数据
sessionStorage.setItem("key", "value");
// 读取数据
var data = sessionStorage.getItem("key");
console.log(data); // 输出 "value"
</script>
- 使用localStorage保存对象:
<script>
// 将对象转换为JSON字符串
var obj = {name: "John", age: 30, city: "New York"};
var objString = JSON.stringify(obj);
// 保存数据
localStorage.setItem("user", objString);
// 读取数据
var user = JSON.parse(localStorage.getItem("user"));
console.log(user.name); // 输出 "John"
</script>
HTML表单标签是用于收集用户输入数据的,例如:文本输入框、密码输入框、单选按钮、复选框、下拉列表等。
以下是一些HTML表单标签的例子:
- 文本输入框:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
- 密码输入框:
<form>
Username: <input type="text" name="username">
Password: <input type="password" name="password">
</form>
- 单选按钮:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
</form>
- 复选框:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
</form>
- 下拉列表:
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form>
以上就是HTML5本地存储和表单标签的一些基本使用方法。
评论已关闭