Html5的学习之旅-Html5的web Storage概述（16）
在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）的更多相关文章
- HTML5 Web Storage概述
Web Storage html5新增功能 可以在客户端本地保存数据 之前是使用Cookies在客户端保存注入用户名等简单用户信息,但永久数据存在几个问题 大小:cookies大小被限制在4KB 带宽 ...
- html5学习之旅-html5的简易数据库开发（18）
实际上是模拟实现html5的数据库功能,用键值对的方式. !!!!!!废话不多说 ,代码 index.html的代码 <!DOCTYPE html> <html lang=" ...
- Html5学习之旅-html5的留言记事本开发（17）
web留言记事本的开发 !!!!!代码如下 index.html的代码 <!DOCTYPE html> <html lang="en"> <head& ...
- HTML5笔记3——Web Storage和本地数据库
上一篇:HTML5笔记2——HTML5音/视频标签详解 Web Storage概述 在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storag ...
- Web Storage
前面的话 Web存储最初作为HTML5的一部分被定义成API形式,但是后来被剥离出来作为独立的一份标准了.该标准目前还在草案阶段,但其中一部分内容已经被包括IE8在内的所有主流浏览器(可交互地)实现了 ...
- web API简介(三)：客户端储存之Web Storage API
概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...
- (转)HTML5开发学习（3）:本地存储之Web Sql Database
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
随机推荐
- 利用Filter和拦截器，将用户信息动态传入Request方法
前言: 在开发当中,经常会验证用户登录状态和获取用户信息.如果每次都手动调用用户信息查询接口,会非常的繁琐,而且代码冗余.为了提高开发效率,因此就有了今天这篇文章. 思路: 用户请求我们的方法会携带一 ...
- JavaScript 知识图谱
- 【mybatis深度历险系列】深入浅出mybatis中原始dao的开发和mapper代理开发
使用Mybatis开发Dao,通常有两个方法,即原始Dao开发方法和Mapper接口开发方法.mybatis在进行dao开发的时候,涉及到三姐妹,分别是SqlSessionFactoryBuilder ...
- 熟悉Python的各种基础小算法
网上有一个Python100小例子的栏目,里面代码良莠不齐,于是下面就自己实现了其中的一些案例. 01.py # coding:utf-8 import sys reload(sys) sys.set ...
- SQL语句常见问题的总结(持续更新)
语言问题 修改语言注册表\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432\ORACLE\KEY_DevSuitHome1中的NLS_LANG修改为AMERICAN_AMERIC ...
- 在电脑上安装Linux操作系统
1硬件需求 A 一台电脑 B 一个优盘 2软件需求 A制作优盘启动盘的软件PowerISO BLinux操作系统的镜像文件 3安装PowerISO,并使用PowerISO A安装PowerISO B插 ...
- Hadoop与分布式数据处理 Spark VS Hadoop有哪些异同点？
Spark是一个开源的通用并行分布式计算框架,由加州大学伯克利分校的AMP实验室开发,支持内存计算.多迭代批量处理.即席查询.流处理和图计算等多种范式.Spark内存计算框架适合各种迭代算法和交互式数 ...
- Java中for_each循环的使用
最近在看一些和安卓相关的书籍,看到了for_each这种循环结构,这是为了简化java的for循环而改造的一种方便使用的格式. 格式如下: for(数据类型 变量:集合) 语句块 接下来看一个例程: ...
- 深入理解MyBatis框架的的配置信息
面对一个框架,最重要的不是说回用其代码就可以了,我们需要了解其思想,这样才能更快更好的掌握这个框架.而对于一个框架,最重要的就是其配置文件的作用及功能了.下面,我就来谈一谈我今天遇到的这个MyBati ...
- 06 Activity隐式跳转
一,隐式跳转 某个Activity 需要在清单文件配置某个Activity如下信息: 注意:category要和action一起用 action:制定一个活动 在隐式跳转的可以用到 category ...