本地存储(localStorage、sessionStorage、web Database)
1.sessionStorage和localStorage
sessionStorage和localStorage两种方法都是当用户在inPut文本框中输入内容并点击保存数据按钮时保存数据,点击读取数据按钮时读取保存后的数据。不过使用sessionStorage时,只能局限于当前页面,如果关闭浏览器,数据就会丢失,下次打开浏览器就会读不到数据。如果使用localStorage时,即使浏览器关闭,下次打开浏览器仍能读取到上次被保存的数据。但是数据的保存时按不同浏览器分别进行的,也就是说,如果打开别的数据,就会读取不到在这个浏览器中保存的数据。
2.web Database
SQLLite的文件型SQL数据库能将用户输入的数据保存到客户端的本地数据库中;
样式
<style>
html {
}
body {
margin: 0;
height: 2000px;
}
div {
height: 100px;
font-size: 18px;
background: red;
}
p {
height: 50px;
/* font-size: 18px; */
}
</style>
结构
用户名:<input type="text" id="user">
密码:<input type="password" id="password">
<!-- 登陆 -->
<input type="submit" id="submit">
js
<script>
var $ = function(id) {
return document.getElementById(id);
}
$('submit').onclick = function() {
var user = $('user').value;
var password = $('password').value;
var ls = window.localStorage;
var ss = window.sessionStorage;
ls.setItem('user', user);
ss.setItem('password', password);
}
~function() {
var ls = window.localStorage;
var ss = window.sessionStorage;
var user = ls.getItem('user');
var password = ss.getItem('password');
$('user').value = user;
$('password').value = password;
}();
</script>
这样一个简单的邮箱本地储存就完成啦!
希望我的理解可以给你们提供一些帮助,学识有限,如果有地方出现错误或者有更好的方法去实现,欢迎私信!