HTML5本地存储之Web Storage应用介绍
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB，感兴趣的朋友可以了解下
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。
Web Storage又分为两种：
sessionStorage
localStorage
从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地；
不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
如上，key和value都必须为字符串，换言之，web Storage的API只能操作字符串。
接下来，我们通过Web Storage开发一个简单的通讯录小程序，以演示相关API的使用方法；我们要实现如下功能：
录入联系人，联系人有姓名、手机号码2个字段，以手机号作为key存入localStorage；
根据手机号码，查找机主；
列出当前已保存的所有联系人信息；
首先，准备一个简单的HTML页面，如下：
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div >
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" class="text"/>
<br/>
<label for="mobilephone">手机：</label>
<input type="text" id="mobilephone" name="mobilephone"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入手机号：</label>
<input type="text" id="search_phone" name="search_phone"/>
<input type="button" onclick="find()" value="查找机主"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
</body>
</html>
//保存数据
function save(){
var mobilephone = document.getElementById("mobilephone").value;
var user_name = document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
}
function find(){
var search_phone = document.getElementById("search_phone").value;
var name = localStorage.getItem(search_phone);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_phone + "的机主是：" + name;
}
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>姓名</td><td>手机号码</td></tr>";
for(var i=0;i<localStorage.length;i++){
var mobilephone = localStorage.key(i);
var name = localStorage.getItem(mobilephone);
result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
}
}
如下简单演示增加了公司属性的联系人保存JS代码：
function save(){
var contact = new Object;
contact.user_name = document.getElementById("user_name").value;
contact.mobilephone = document.getElementById("mobilephone").value;
contact.company = document.getElementById("company").value;
var str = JSON.stringify(contact);
localStorage.setItem(contact.mobilephone,str);
loadAll();
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>姓名</td><td>手机</td><td>公司</td></tr>";
for(var i=0;i<localStorage.length;i++){
var mobilephone = localStorage.key(i);
var str = localStorage.getItem(mobilephone);
var contact = JSON.parse(str);
result += "<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
}
}
HTML5本地存储之Web Storage应用介绍的更多相关文章
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- HTML5本地存储之Web Storage实例篇,最有用的是localStorage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5 本地存储（Web Storage）
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 本地永久存储,下次打开浏览器数据依然存在 sessionStorage - 只存在于一个会话的数据存储,关闭浏览器数据会 ...
- 利用HTML5开发Android(7)---HTML5本地存储之Database Storage
在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...
- html5本地存储（localStorage）使用介绍
1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...
- HTML5本地存储 Web Storage
Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API sessionStorage 和 localStorage,二者的差异主要是数 ...
- HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- [转]HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- HTML5本地存储——Web SQL Database与indexedDB
虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...
随机推荐
- 【Yii系列】最佳实践之后台业务框架
缘起 上面的几章都讲概念了,没有怎么讲到实践的东西,可能会有些枯燥,这很正常的,概念还是需要慢慢啃的,尤其是官网其他的部分,需要狠狠的啃. 什么,你啃不动了?看看官网旁边的那个在线用户吧. 你不啃的时 ...
- iOS最好用的引导页
最近项目结束的时候又要改引导页,之前写的启动页改起来太麻烦了,所以就直接封装一个,功能可能还不是很完善,但是感觉用起来也比较方便,在这里和大家分享一下. 这是github的下载地址:https://g ...
- Ubuntu离线安装VSCode（附带前期准备工作）
跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 在说正式步骤前先把准备工作做到位: 1.IP设置,这个因为是GUI的,手动设置 ...
- 转接IC整理汇总 转接芯片大全
转接口IC大全,信号转换大全EDP输出信号NCS8801 LVDS转EDP.RGB转EDP 封装QFN56 最大分辨率2560*1600用于手机.平板.转接板.液晶驱动板.广告机.可视门铃等等控制器到 ...
- Spring基础学习(五)—事务管理
一.事务基本认识 1.事务的概述 为了保证数据库中数据的一致性,数据的操作应当是离散的成组的逻辑单元.当它全部完成时,数据的一致性可以保持,而当这个单元中的一部分操作失败,整个事务应当全部视 ...
- 浅谈 虚方法（virtual）
虚方法 理解:从字面意思来讲,"虚",可有可无,子类对父类的某种方法的重写,可以重写,也可以不重写. 虚方法,顾名思义(装个13),就是某种方法. 用法:public virtua ...
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C#小知识点记录（QQ交流群的一个小问题）Linq提取数据
请教 这里 LINQ想 找到 最后的 4条 记录 然后放在 这里这个 List Linq查找怎么写呀? 解答:写了一个小例子作为解答. namespace C_Sharp { class Progra ...
- CLR via C#中的一个多线程例子
parallel的For和ForEach方法有一些重载版本允许传递三个委托 1.任务局部初始化委托(localInit),未参与工作的每一个任务都调用一次委托,在任务被要求处理前调用. 2.主体委托( ...
- 篇5 python自动化测试应用-Selenium环境篇
篇5 python自动化测试应用-Selenium环境篇 --lamecho 1.1概要 大家好!我是lamecho(辣么丑),从本篇开始我将开始 ...