在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的学习之旅-Html5的web Storage概述（16）的更多相关文章

  1. HTML5 Web Storage概述

    Web Storage html5新增功能 可以在客户端本地保存数据 之前是使用Cookies在客户端保存注入用户名等简单用户信息,但永久数据存在几个问题 大小:cookies大小被限制在4KB 带宽 ...

  2. html5学习之旅-html5的简易数据库开发（18）

    实际上是模拟实现html5的数据库功能,用键值对的方式. !!!!!!废话不多说 ,代码 index.html的代码 <!DOCTYPE html> <html lang=" ...

  3. Html5学习之旅-html5的留言记事本开发（17）

    web留言记事本的开发 !!!!!代码如下 index.html的代码 <!DOCTYPE html> <html lang="en"> <head& ...

  4. HTML5笔记3——Web Storage和本地数据库

    上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...

  5. Web Storage

    前面的话 Web存储最初作为HTML5的一部分被定义成API形式,但是后来被剥离出来作为独立的一份标准了.该标准目前还在草案阶段,但其中一部分内容已经被包括IE8在内的所有主流浏览器(可交互地)实现了 ...

  6. web API简介(三)：客户端储存之Web Storage API

    概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...

  7. (转)HTML5开发学习（3）:本地存储之Web Sql Database

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...

  8. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  9. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

随机推荐

  1. CSS中display:block属性的作用

    display:block可以理解为块,举个简单的例子!比如你做一个超链接,<li><a href="#">超链接</a></li> ...

  2. MongoDB 索引限制

    额外开销 每个索引占据一定的存储空间,在进行插入,更新和删除操作时也需要对索引进行操作.所以,如果你很少对集合进行读取操作,建议不使用索引. 内存(RAM)使用 由于索引是存储在内存(RAM)中,你应 ...

  3. Redis从入门到精通：中级篇

    原文链接:http://www.cnblogs.com/xrq730/p/8944539.html,转载请注明出处,谢谢 本文目录 上一篇文章以认识Redis为主,写了Redis系列的第一篇,现在开启 ...

  4. MySQL系列教程（四）

    文件打开数(open_files) 我们现在处理MySQL故障时,发现当Open_files大于open_files_limit值时,MySQL数据库就会发生卡住的现象,导致Nginx服务器打不开相应 ...

  5. iOS objc_msgSend 野指针Crash 从 Log 提取 Crash 时 selector 的地址和名字并打印

    从 crash stack log 里面,提取 objc_msgSend 关键字,定位是否是野指针问题导致的crash,如果是则打印 crash 时的 objc_msgSend 调用的第二个参数,即 ...

  6. Unity UGUI图文混排(七) -- 下划线

    之前更新超链接的时候,忘了搭配实现一个下划线的功能,这篇文章就是来补上这一个功能,时间有点长,一方面没有很好的思路,一方面也没多少时间. 先在网上收集了一下下划线的实现操作,一种是在文本下再创建一个文 ...

  7. Dynamics CRM 删除字段时检测到有组件类型为查看的依赖组件而无法删除问题

    今天在删除一个字段的时候报如下截图错误,点开详细信息会看到是一个快速查找视图,但却在视图列中没有找到我要删的那个字段,然后回过头来又看到组件类型是查看,这是啥类型?有点摸不着头脑了. 最后想到是不是查 ...

  8. Android简易实战教程--第三十四话《 自定义SeekBar以及里面的一些小知识》

    转载本专栏文章,请注明出处尊重原创:博客地址http://blog.csdn.net/qq_32059827/article/details/52849676:小杨的博客 许多应用可能需要加入进度,例 ...

  9. ROS连接ABB机械臂调试详细教程-ROS(indigo)和ABB RobotStudio 6.03.02-

    在ROS industrial介绍中,给出了ROS和常用机械臂的连接方式.具体信息可以参考:http://wiki.ros.org/Industrial ROS连接ABB机械臂调试详细教程-ROS(i ...

  10. 剑指Offer——携程笔试题+知识点总结

    剑指Offer--携程笔试题+知识点总结 情景回顾 时间:2016.9.17 19:10-21:10 地点:山东省网络环境智能计算技术重点实验室 事件:携程笔试 总体来说,携程笔试内容与其它企业笔试题 ...