作者：嗒嗒爱臭臭 | 来源：互联网 | 2023-07-17 03:40
认识WebStorage一、什么是WebStorage一、WebStorage和Cookies的区别我们之前开发一般都是使用Cookies在客户端保存诸如用户名等简单用户信息，但
认识Web Storage
一、什么是Web Storage
一、Web Storage和COOKIEs的区别
- 我们之前开发一般都是使用COOKIEs在客户端保存诸如用户名等简单用户信息，但通过长期的使用，人们发现还用COOKIEs存储永久数据存在几个问题。
大小：COOKIEs的大小被限制在4KB
宽带：COOKIEs是随HTTP事务一起被发送的，因此浪费一部分发送COOKIEs时使用的宽带。
复杂性：要正确的操纵COOKIEs是很困难的。
- 所以针对上面COOKIEs造成的问题，在HTML5中，重新提供了一种在客户端本地存储数据的功能，他就是Web Storage
三、案例，简单的保存数据，和显示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Storagetitle>
<script src="webjs/webstorage_js.js">script>
head>
<body><p id="msg">p>
<input type="text" id="input"><button onclick="saveStorage('input')">保存数据
button>
<button onclick="getWebStorage('msg')">获取数据
button>
body>
html>
/**
* Created by Administrator on 2017/7/5.
*/
/*注意，使用sessionStorage保存的数据，如果网页被关闭，那么保存的数据就会被清空*/
/*保存session保存的数据*/
/*function saveStorage(id) {
var date = document.getElementById(id)
var values = date.value;
sessionStorage.setItem("mession",values)
}
/!*获取session保存的数据*!/
function getWebStorage(id) {
var date = document.getElementById(id)
var msg = sessionStorage.getItem("mession")
date.innerHTML = msg;
}*/
/*注意，使用localStorage保存的数据，是永久存在的，就算网页被关闭，数据也不会被清除。除非你自己手动删除*/
/*保存localStorage保存的数据*/
function saveStorage(id) {
var date = document.getElementById(id)
var values = date.value;
localStorage.setItem("mession",values)
}
/*获取localStorage保存的数据*/
function getWebStorage(id) {
var date = document.getElementById(id)
var msg = localStorage.getItem("mession")
date.innerHTML = msg;
}
四、案例二：留言板案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>记事本例子title>
<script src="webjs/webjs02.js">script>
head>
<body>
<p>后面是跟的数据 ：p>
<div>
<p id = msg>p>
<hr>
<textarea id="vules" rows="10" cols="60" >textarea><br/>
<button onclick="savewebstorage('vules')">追加数据button>
<button onclick="clearwebstorage()">删除数据button>
div>
body>
html>
function savewebstorage(id) {
var date = document.getElementById(id);
var msgss = date.value;
var time = new Date().getTime();
localStorage.setItem(time,msgss);
localWebStorage('msg');
alert("数据已储存");
}
function localWebStorage(id) {
var result = "";
for(var i = 0;i var key = localStorage.key(i);
var values = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
result+="| "+values+" | "+date+" |
";
}
result+="
";
var targ = document.getElementById(id);
targ.innerHTML = result;
}
function clearwebstorage() {
localStorage.clear();
alert("清除数据")
localWebStorage('msg');
}
五、案例三：作为简单的数据库来使用，可查询
- 代码
这里写代码片
function savawebstorage() {
var data = new Object();
data.name = document.getElementById('name').value;
data.email = document.getElementById('email').value;
data.tel = document.getElementById('tel').value;
data.meto = document.getElementById('meto').value;
var str = JSON.stringify(data);
localStorage.setItem(data.name,str);
alert("保存成功")
}
function findwebstorage(id) {
var finddata = document.getElementById('find').value;
var str = localStorage.getItem(finddata);
var data = JSON.parse(str);
var result ="姓名："+data.name+"
";
result +="邮箱："+data.email+"
";
result +="电话："+data.tel+"
";
result +="备注："+data.meto+"
";
var text = document.getElementById(id);
text.innerHTML = result;
}
我现在是H5新手学习，这些博客都是我自己学习的笔记，等学完会统一整理H5的每一篇博客。这些可能就会删除并重新修正再发表，所以如果有错误请大家指正。感激不尽！
京公网安备 11010802041100号