HTML5深入学习之数据存储
程序员文章站
2022-10-08 21:58:51
概述 本来，数据存储都是由 cookie 完成的，但是 cookie 不适合大量数据的存储，cookie 速度慢且效率低。 现在，HMLT5提供了两种在客户端存储数据的办法： 两者之间的实测对比 localStorage 首先我们先运行这段代码： 然后浏览器则弹出显示： 接着，我们注释掉localS ......
概述
本来，数据存储都是由 cookie 完成的，但是 cookie 不适合大量数据的存储，cookie 速度慢且效率低。
现在，hmlt5提供了两种在客户端存储数据的办法：
- localstorage(没有时间限制的数据存储，即当我们设置了之后浏览器关闭后再去访问它依然存在)
- sessionstorage(针对一个session的数据存储，当我们设置了之后浏览器关闭后再去访问他就消失了)
两者之间的实测对比
localstorage
首先我们先运行这段代码：
localstorage.setitem('name', 'lisi');
alert(localstorage.getitem('name'));
然后浏览器则弹出显示：
接着，我们注释掉localstorage.setitem('name', 'lisi');，关闭浏览器重新访问，依然可以显示：
sessionstorage
步骤大概和设置 localstorage 一样，但是浏览器关闭后再次访问已不见 sessionstorage
浏览器关闭前：
浏览器关闭后再次访问：
实例(记住用户名与密码)-----使用 localstorage
常用api:
- setitem() => 设置要存储得数据
- getitem() => 获取存储的数据
- removeitem() => 移除存储的数据
代码：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
</head>
<body>
用户名: <input type="text" name="username" id="username"><br>
密码： <input type="password" name="pwd" id="pwd"><br>
记住用户名与密码: <input type="checkbox" name="save" id="save">
<script type="text/javascript">
var username = document.getelementsbyname('username')[0];
var pwd = document.getelementsbyname('pwd')[0];
var save = document.getelementsbyname('save')[0];
if (localstorage.getitem('username') && localstorage.getitem('pwd')) {
// 将获取到的值添加到 html
username.value = localstorage.getitem('username');
pwd.value = localstorage.getitem('pwd');
}
save.addeventlistener('click', function () {
if (save.checked) {
localstorage.setitem('username', username.value);
localstorage.setitem('pwd', pwd.value);
} else {
localstorage.removeitem('username');
localstorage.removeitem('pwd');
}
});
</script>
</body>
</html>