您的位置：首页 > Web前端 > HTML5

HTML5学习05-Web Storage存储

2017-07-05 16:25 363 查看

认识Web Storage

一、什么是Web Storage



一、Web Storage和Cookies的区别

我们之前开发一般都是使用Cookies在客户端保存诸如用户名等简单用户信息，但通过长期的使用，人们发现还用Cookies存储永久数据存在几个问题。

大小：Cookies的大小被限制在4KB

宽带：Cookies是随HTTP事务一起被发送的，因此浪费一部分发送Cookies时使用的宽带。

复杂性：要正确的操纵Cookies是很困难的。

所以针对上面Cookies造成的问题，在HTML5中，重新提供了一种在客户端本地存储数据的功能，他就是Web Storage

三、案例，简单的保存数据，和显示

效果图



代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Storage</title>

<script src="webjs/webstorage_js.js"></script>
</head>
<body>

<p id="msg"></p>

<input type="text" id="input">

<!--传入的值就是输入框id = input中的内容-->
<button onclick="saveStorage('input')">保存数据</button>

<!--获取到的值，显示在id="msg"的位置   -->
<button onclick="getWebStorage('msg')">获取数据</button>
</body>
</html>


js样式

/**
* 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;
}


四、案例二：留言板案例

效果图



代码

<!DOCTYPE html>
<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>


js样式

/**
* Created by Administrator on 2017/7/5.
*/

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 = "<table>";
for(var i = 0;i<localStorage.length;i++){
var  key = localStorage.key(i);
var values = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
result+="<tr><td>"+values+"</td><td>"+date+"</td></tr>";
}
result+="</table>";
var targ = document.getElementById(id);
targ.innerHTML = result;
}

function clearwebstorage() {
localStorage.clear();
alert("清除数据")
localWebStorage('msg');
}


五、案例三：作为简单的数据库来使用，可查询

效果图



也可以在网页上查看自己存储了那些数据



- 代码

这里写代码片


javascrept代码

/**
* Created by Administrator on 2017/7/5.
*/

//保存数据
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("保存成功")
}
//查询方法，通过name来查询
function findwebstorage(id) {

var finddata = document.getElementById('find').value;

var  str = localStorage.getItem(finddata);

var data = JSON.parse(str);

var result ="姓名："+data.name+"<br>";
result +="邮箱："+data.email+"<br>";
result +="电话："+data.tel+"<br>";
result +="备注："+data.meto+"<br>";

var text = document.getElementById(id);
text.innerHTML = result;

}


我现在是H5新手学习，这些博客都是我自己学习的笔记，等学完会统一整理H5的每一篇博客。这些可能就会删除并重新修正再发表，所以如果有错误请大家指正。感激不尽！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航