HTML5学习05-Web Storage存储

来源：互联网发布：dota2公开天梯数据编辑：程序博客网时间：2024/06/16 11:19

认识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的每一篇博客。这些可能就会删除并重新修正再发表，所以如果有错误请大家指正。感激不尽！

阅读全文

0 0