一 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 ...

随机推荐

ASP.NET 系列：单元测试之ConfigurationManager
通过ConfigurationManager使用.NET配置文件时,可以通过添加配置文件进行单元测试,虽然可以通过测试但达不到解耦的目的.使用IConfigurationManager和Configu ...
用 canvas 做个好玩的网站背景
不知不觉又好久没更过博客了,老调新弹一下,之前做的一个小效果,觉得蛮有意思的,也有朋友问是怎么做的,就分享一下,写个博文吧. 先上demo吧:http://whxaxes.github.io/canv ...
解决问题：由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本，请添加处理程序。如果应下载文件，请添加 MIME 映射。
WindowServer2012服务器,添加角色安装完.netframework和iis之后,运行aspx页面就报如下错误: HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法 ...
EditPlus v4.5 简体中文
优秀的代码编辑器! 下载地址: EditPlus v4.00 build 465 简体中文汉化增强版 http://yunpan.cn/cVCSIZsKK7VFF 访问fe58 http://p ...
【Javascript】好用的js弹层插件，layerUI
官网:layerUI 中文手册:layerAPI
50-ln 简明笔记
为文件建立链接 ln [options] existing-file [new-link] ln [options] existing-file-list directory ln可以为一个或多个文件 ...
JS模块规范前端模块管理器
一:JS模块规范(为了将js文件像java类一样被import和使用而定义为模块, 组织js文件,实现良好的文件层次结构.调用结构) A:CommonJS就是为JS的表现来制定规范,因为js没有模块的 ...
less 学习（计划终于执行了啊，不再拖延了）
1.less是什么? 答:将CSS赋予动态语言的特性, 变量,继承,运算,函数. (less就是一个用js实现的CSS解析器,运行要依赖js引擎). 2.运行原理: 按照指定语法规则写好less文 ...
[转]oracle设计数据库应选择正确的数据类型
原文地址:http://blog.sina.com.cn/s/blog_5014663501007n40.html 在设计数据库的时候,选择正确的数据类型,往往可以避免很多的问题,正确理解数据库的类型 ...
iPad开发--美团界面的搭建(主要是对Popover的使用,以及监听)
一.主界面的搭建,效果图.设置self.navigationItem.leftBarButtonItems属性. 由于leftBarButtonItem是通过xib文件创建的,通过xib创建的控件默认 ...

HTML5学习总结-07 WebStorage 本地存储