HTML5学习总结-07 WebStorage 本地存储
一 Storage
sessionStorage
- session临时回话，从页面打开到页面关闭的时间段
- 窗口的临时存储，页面关闭，本地存储消失
localStorage
永久存储（可以手动删除数据）
Storage的特点
- 存储量限制 ( 5M )
- 客户端完成，不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享
二 Storage API
setItem():
- 设置数据，(key,value)类型，类型都是字符串
- 可以用获取属性的形式操作
getItem():
- 获取数据，通过key来获取到相应的value
removeItem():
- 删除数据，通过key来删除相应的value
clear():
- 删除全部存储的值
三 Storage API
存储事件:
当数据有修改或删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
- Key : 修改或删除的key值，如果调用clear(),key为null
- newValue : 新设置的值，如果调用removeStorage(),key为null
- oldValue : 调用改变前的value值
- storageArea : 当前的storage对象
- url : 触发该脚本变化的文档的url
四 例子
会话存储
<!doctype html>
<html >
<head>
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<title>Document</title>
</head>
<body>
<input type="button" value="添加数据" id="btn1">
<input type="button" value="获取数据" id="btn2">
<input type="button" value="删除数据" id="btn3">
<input type="text" id="txt">
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var txt = document.getElementById("txt");
//添加数据
btn1.onclick = function(){
sessionStorage.setItem("key",txt.value);
}
//获取数据
btn2.onclick = function(){
var val = sessionStorage.getItem("key");
alert(val);
}
//删除数据
btn3.onclick = function(){
sessionStorage.removeItem("key");
}
</script>
</body>
</html>
本地存储
<!doctype html>
<htm >
<head>
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<title>Document</title>
</head>
<body>
<input type="button" value="添加数据" id="btn1">
<input type="button" value="获取数据" id="btn2">
<input type="button" value="删除数据" id="btn3">
<input type="text" id="txt">
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var txt = document.getElementById("txt");
//添加数据
btn1.onclick = function(){
localStorage.setItem("key",txt.value);
}
//获取数据
btn2.onclick = function(){
var val = localStorage.getItem("key");
alert(val);
}
//删除数据
btn3.onclick = function(){
localStorage.removeItem("key");
}
</script>
</body>
</html>
五 WebSQLDatabase
Web SQL Database允许应用程序通过一个异步的JavaScript接口访问SQLite数据库。
SQLite是小型嵌入式数据库，是遵守ACID的关系式数据库管理系统，它包含在一个相对小的C库中。
SQLite 不像常见的客户端/服务器结构范例，Sqlite不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分，SQLLite的通信协议是在编程语言内的直接API调用，
整个数据库(定义，表，索引和数据本身)都在宿主机上存储在一个单一的文件中，它的简单的设计是通过在开始一个事务的时候所定整个数据文件完成数据存储。
以下例子仅仅针对Chrome浏览器生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web SQL DataBase</title>
</head>
<body>
<button id="createDbBtn">initDatabase</button>
<button id="delRecBtn">delte record</button> <script>
var db = openDatabase('db' , '1.0' , 'my first database' , * * ); function initDatabase(){
var names =['zhangsan', "lisi" , "wangwu"];
db.transaction(function(tx){
tx.executeSql("create table if not exists people(id integer primary key autoincrement, name)");
for(var i=;i<names.length;i++){
tx.executeSql('insert into people(name) values(?);', [ names[i] ] );
}
});
} var createDbBtn = document.getElementById("createDbBtn");
createDbBtn.onclick = function(){
initDatabase();
} function deleteRecord(){
db.transaction(function(tx){
//删除id等于2的记录
//tx.executeSql("delete from people where id = ? ", [2]);
//删除全部记录
tx.executeSql("delete from people where id > 0 ", null);
});
} var delRecBtn = document.getElementById("delRecBtn");
delRecBtn.onclick = function(){
deleteRecord();
} </script>
</body> </html>
六 SQLite
SQLite，是一款轻型的数据库，是遵守ACID的关系型数据库管理系统，它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的，而且目前已经在很多嵌入式产品中使用了它，它占用资源非常的低，在嵌入式设备中，可能只需要几百K的内存就够了。它能够支持Windows/Linux/Unix等等主流的操作系统，同时能够跟很多程序语言相结合，比如 Tcl、C#、PHP、Java等，还有ODBC接口，同样比起Mysql、PostgreSQL这两款开源的世界著名数据库管理系统来讲，它的处理速度比他们都快。SQLite第一个Alpha版本诞生于2000年5月。 至2015年已经有15个年头，SQLite也迎来了一个版本 SQLite 3已经发布。
创建第一个SQLite数据库。在命令行生成一个test.db的数据库。输入以下命令：
sqlite3 test.db
创建表：
create table people(id integer primary key, name text);
注意: 最少必须为新建的数据库创建一个表或者视图，这么才能将数据库保存到磁盘中，否则数据库不会被创建。
接下来往表里中写入一些数据，输入以下命令：
insert into people(id, name) values(, 'zhangsan');
insert into people(id, name) values(2, 'lisi');
insert into people(id, name) values(3, 'wangwu');
查询people表的记录，输入如下命令。
select * from people;
发现返回的记录中没有column.设置格式。
.header on
在查询people 表，会发现有表头了。查询现有的表，输入如下命令。
.tables
查询表结构，以peple表为例。
.schema people
HTML5学习总结-07 WebStorage 本地存储的更多相关文章
- (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...
- (转)HTML5开发学习（3）:本地存储之Web Sql Database
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...
- HTML5基础扩展——地理位置、本地存储、缓存
HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...
- html5 localStorage实现表单本地存储
随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...
- HTML5学习笔记（五）存储
HTML5 web 存储,一个比cookie更好的本地存储方式.数据以 键/值 对存在, web网页的数据只允许该网页访问使用.加的安全与快速.可以存储大量的数据,而不影响网站的性能. 客户端存储数据 ...
- Html5本地存储+本地数据库+离线存储
首先介绍什么叫存储: cache:通常把它叫做缓存,功能就是把从DB,或者磁盘拿出来的东西放在缓存里面,这样的话可以减少读取磁盘的IO. 磁盘文件:通常把一些图片或者一些视频都存放在磁盘上. 数据库: ...
- 【转】本地存储-localStroage/sessionStorage存储
原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...
- HTML5学习的价值是什么？
随着互联网的发展和移动端的发展,很多公司对HTML5前端开发的需求旺盛,市场人才短缺供不应求. 对于HTML5的迅速发展和市场的大量需求,究竟为何HTML5如此受欢迎,它的价值在哪里呢? 语义特性(C ...
- 客户端本地存储的比较及使用window.name数据传输
一:cookie: 1. 什么是cookie? Cookie是在客户端用于存储会话信息的,用户请求页面在web服务器与浏览器之间传递.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cooki ...
随机推荐
- Jquery和JS获取ul中li标签（转）
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- Redis Sentinel：集群Failover解决方案（转载）
本文转载自:http://shift-alt-ctrl.iteye.com/blog/1884370 文中的配置例子,还有failover过程中触发的订阅事件具有很好的参考价值. Redis sent ...
- 清空KindEditor富文本编辑器里面的内容方法
//清空KindEditorKindEditor.instances[0].html(""); 0表示第一个KindEditor编辑器对象 详情见链接:http://www.new ...
- Putty SSH简单使用
本地的puttygen生出的秘钥,公钥传到服务器上连接会报错 Server refused our key. 一般我们建议都在服务器上生成秘钥,把私钥下载下来.加载到putty认证中 01.在服务器上 ...
- PHPStorm2016如何安装主题
今天放出如何安装phpstorm 主题教程,教程如下: 下载主题 地址:phpstoorm-themes.com 安装主题 PhpStorm and WebStorm themes can be in ...
- input用法，永远等待，直到用户输入值赋值给一个东西。
input用法,永远等待,直到用户输入值赋值给一个东西. n1 = input('请输入用户名:') n1 = input('请输入密码:') print(n1) print(n1)
- Android 之px于dp在Java代码中的转换
现在由于用到了,使用代码进行动态布局,所以需要进行px于dp之间的转换. 现将其封装为方法,以便于调用. public int DpToPx(Context context,float dp){ fl ...
- 路由知识之ip route 命令中的疑惑
1.基础知识 1.1 路由 (Routing) 1.1.1 路由策略 (使用 ip rule 命令操作路由策略数据库) 基于策略的路由比传统路由在功能上更强大,使用更灵活,它使网络管理员不仅能够根据目 ...
- C/C++中NULL的涵义
参考:百度知道NULL表示空指针,用于表示一个无效的指针,它的值为0(早期C语言的实现中可能有非0空指针,现在已经不用).对指针置NULL即标记指针无效,避免“野指针”的恶果.NULL在C/C++标准 ...
- Cocoa pod的使用注意点
一.CocoaPods是什么? CocoaPods是一个负责管理iOS项目中第三方开源库的工具.CocoaPods的项目源码在Github上管理.该项目开始于2011年8月12日,在这两年多的时间里, ...