Html5的学习之旅-Html5的web Storage概述(16)
2015-09-22 20:43
507 查看
在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题:
大小:Cookies的大小被限制在4kb左右
带宽:Coolies是随着Http业务被一起发送的,因此会浪费一部分带宽
复杂性:要正确的操作Cookies是很苦难的
针对以上问题,html5提出了一种在本地保存数据的方法:web storage
它有两种处理方式:
session storage:将数据保存在session对象中。session是用户打开这个网站到关闭这个网站,所经历的时间,也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。
local storage:将数据保存在客户端的硬件(硬盘)中,即使用户的浏览器关闭了。下次打开时候,也会重新加载
session storage实例
index.html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5表格提交</title> <script src="appWeb.js"></script> </head> <body> <p id="msg"></p> <input type="text" id="input"> <input type="button" value="保存数据" onclick="saveStorage('input')"> <input type="button" value="读取数据" onclick="loadStorage('msg')"> </body> </html>
appWeb代码
/** * Created by joy liu on 2015/9/22. */ function saveStorage(id){ var target = document.getElementById(id); var string = target.value; sessionStorage.setItem("message",string); } function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message"); target.innerHTML = msg; }
!!!!效果图
local storage的实例
index代码没变,js代码
/** * Created by joy liu on 2015/9/22. */ //function saveStorage(id){ // var target = document.getElementById(id); // var string = target.value; // sessionStorage.setItem("message",string); //} //function loadStorage(id){ // var target = document.getElementById(id); // var msg = sessionStorage.getItem("message"); // target.innerHTML = msg; //} function saveStorage(id){ var target = document.getElementById(id); var string = target.value; localStorage.setItem("message",string); } function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message"); target.innerHTML = msg; }
效果图
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- Tomcat端口被占用解决方法(不用重启)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- “传奇”图象数据存储方式
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- 超大数据量存储常用数据库分表分库算法总结
- css实现气泡框效果(实例加图解)
- html链接与文本标签们
- html活用软字符连接符
- 浅谈html中id和name的区别实例代码