一 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

四 例子

会话存储

  1. <!doctype html>
  2. <html >
  3.     <head>
  4.         <meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
  5.         <title>Document</title>
  6.     </head>
  7.     <body>
  8.         <input type="button" value="添加数据" id="btn1">
  9.         <input type="button" value="获取数据" id="btn2">
  10.         <input type="button" value="删除数据" id="btn3">
  11.         <input type="text" id="txt">
  12.         <script>
  13.             var btn1 = document.getElementById("btn1");
  14.             var btn2 = document.getElementById("btn2");
  15.             var btn3 = document.getElementById("btn3");
  16.             var txt = document.getElementById("txt");
  17.             //添加数据
  18.             btn1.onclick = function(){
  19.                 sessionStorage.setItem("key",txt.value);
  20.             }
  21.             //获取数据
  22.             btn2.onclick = function(){
  23.                 var val = sessionStorage.getItem("key");
  24.                 alert(val);
  25.             }
  26.             //删除数据
  27.             btn3.onclick = function(){
  28.                 sessionStorage.removeItem("key");
  29.             }
  30.         </script>
  31.     </body>
  32. </html>

本地存储

  1. <!doctype html>
  2. <htm >
  3.     <head>
  4.         <meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
  5.         <title>Document</title>
  6.     </head>
  7.     <body>
  8.         <input type="button" value="添加数据" id="btn1">
  9.         <input type="button" value="获取数据" id="btn2">
  10.         <input type="button" value="删除数据" id="btn3">
  11.         <input type="text" id="txt">
  12.         <script>
  13.             var btn1 = document.getElementById("btn1");
  14.             var btn2 = document.getElementById("btn2");
  15.             var btn3 = document.getElementById("btn3");
  16.             var txt = document.getElementById("txt");
  17.             //添加数据
  18.             btn1.onclick = function(){
  19.                 localStorage.setItem("key",txt.value);
  20.             }
  21.             //获取数据
  22.             btn2.onclick = function(){
  23.                 var val = localStorage.getItem("key");
  24.                 alert(val);
  25.             }
  26.             //删除数据
  27.             btn3.onclick = function(){
  28.                 localStorage.removeItem("key");
  29.             }
  30.         </script>
  31.     </body>
  32. </html>

五 WebSQLDatabase

　　Web SQL Database允许应用程序通过一个异步的JavaScript接口访问SQLite数据库。
SQLite是小型嵌入式数据库，是遵守ACID的关系式数据库管理系统，它包含在一个相对小的C库中。
SQLite 不像常见的客户端/服务器结构范例，Sqlite不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分，SQLLite的通信协议是在编程语言内的直接API调用，
整个数据库(定义，表，索引和数据本身)都在宿主机上存储在一个单一的文件中，它的简单的设计是通过在开始一个事务的时候所定整个数据文件完成数据存储。

　　以下例子仅仅针对Chrome浏览器生效。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Web SQL DataBase</title>
  6.     </head>
  7.     <body>
  8.     <button id="createDbBtn">initDatabase</button>
  9.     <button id="delRecBtn">delte record</button>
  10.  
  11.     <script>
  12.         var db = openDatabase('db' , '1.0' , 'my first database' ,  *  * );
  13.  
  14.         function initDatabase(){
  15.             var names =['zhangsan', "lisi" , "wangwu"];
  16.             db.transaction(function(tx){
  17.                 tx.executeSql("create table if not exists people(id integer primary key autoincrement, name)");
  18.                 for(var i=;i<names.length;i++){
  19.                     tx.executeSql('insert into people(name) values(?);', [ names[i] ] );
  20.                 }
  21.             });
  22.         }
  23.  
  24.         var createDbBtn = document.getElementById("createDbBtn");
  25.         createDbBtn.onclick = function(){
  26.             initDatabase();
  27.         }
  28.  
  29.     function deleteRecord(){
  30.             db.transaction(function(tx){
  31.                 //删除id等于2的记录
  32.                 //tx.executeSql("delete from people where id = ? ", [2]);
  33.                 //删除全部记录
  34.                 tx.executeSql("delete from people where id > 0 ", null);
  35.             });
  36.         }
  37.  
  38.         var delRecBtn = document.getElementById("delRecBtn");
  39.         delRecBtn.onclick = function(){
  40.             deleteRecord();
  41.         } 
  42.  
  43.     </script>
  44.     </body>
  45.  
  46. </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的数据库。输入以下命令：

  1. sqlite3 test.db

　　创建表：

  1. create table people(id integer primary key, name text);

　　注意: 最少必须为新建的数据库创建一个表或者视图，这么才能将数据库保存到磁盘中，否则数据库不会被创建。

　　接下来往表里中写入一些数据，输入以下命令：

  1. insert into people(id, name) values(, 'zhangsan');  
  1. insert into people(id, name) values(2, 'lisi');  
  1. insert into people(id, name) values(3, 'wangwu');

　　查询people表的记录，输入如下命令。

  1. select * from people;

　　发现返回的记录中没有column.设置格式。

  1. .header on

　　在查询people 表，会发现有表头了。查询现有的表，输入如下命令。

  1. .tables

　　查询表结构，以peple表为例。

  1. .schema people

HTML5学习总结-07 WebStorage 本地存储的更多相关文章

  1. (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage

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

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

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

  3. HTML5基础扩展——地理位置、本地存储、缓存

    HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...

  4. html5 localStorage实现表单本地存储

    随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...

  5. HTML5学习笔记（五）存储

    HTML5 web 存储,一个比cookie更好的本地存储方式.数据以 键/值 对存在, web网页的数据只允许该网页访问使用.加的安全与快速.可以存储大量的数据,而不影响网站的性能. 客户端存储数据 ...

  6. Html5本地存储+本地数据库+离线存储

    首先介绍什么叫存储: cache:通常把它叫做缓存,功能就是把从DB,或者磁盘拿出来的东西放在缓存里面,这样的话可以减少读取磁盘的IO. 磁盘文件:通常把一些图片或者一些视频都存放在磁盘上. 数据库: ...

  7. 【转】本地存储-localStroage/sessionStorage存储

    原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l  WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...

  8. HTML5学习的价值是什么？

    随着互联网的发展和移动端的发展,很多公司对HTML5前端开发的需求旺盛,市场人才短缺供不应求. 对于HTML5的迅速发展和市场的大量需求,究竟为何HTML5如此受欢迎,它的价值在哪里呢? 语义特性(C ...

  9. 客户端本地存储的比较及使用window.name数据传输

    一:cookie: 1. 什么是cookie? Cookie是在客户端用于存储会话信息的,用户请求页面在web服务器与浏览器之间传递.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cooki ...

随机推荐

  1. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

  2. js的Array的map和sort实现方法

    Array.prototype.mapA = function(fun /*, thisp*/) { var len = this.length; if (typeof fun != "fu ...

  3. SDRAM读写一字（下）

    SDRAM读写一字 SDRAM控制模块 上电后进行初始化状态,初始化完成后进入空闲状态,在此进行判断如下判断: 如果自刷新时间到,则进行自刷新操作,操作完成后重新进入空闲状态: 如果读使能有效则进行读 ...

  4. [HDOJ5442]Favorite Donut（最大表示法）

    嗯……就是最小表示法改一下…… 这题就是把S串当作两个判断同构的串,然后就搞出最大的表示了 然后在反向再做一次 O(n)求最大表示,O(n)判断正反谁大

  5. 使用socket()函数创建套接字

    在Linux中,一切都是文件,除了文本文件.源文件.二进制文件等,一个硬件设备也可以被映射为一个虚拟的文件,称为设备文件.例如,stdin 称为标准输入文件,它对应的硬件设备一般是键盘,stdout ...

  6. Android 轻量级输入校验库：Fire Eye

    Fire Eye是一款轻量级简单易用的Android校验库. FireEye 2.0 在 1.0 的基础上,全部重写了代码,并优化了架构,性能上和逻辑上都大大提升.只需要几行代码,即可验证用户输入,并 ...

  7. Maven的生命周期和插件

    首先解释下maven build等 Maven build是这个插件让你自己去配置执行目标的.Maven clean 清除上一次Maven执行的结果Maven generate-sources会根据p ...

  8. HTMLTestRunner修改Python3的版本

    在拜读虫师大神的Selenium2+Python2.7时,发现生成HTMLTestRunner的测试报告使用的HTMLTestRunner的模块是用的Python2的语法.而我本人比较习惯与Pytho ...

  9. 做WEB开发的时候，前端与后端我们应该要注意哪些细节，哪些容易出现的漏洞？

    写这篇文章的时候,我和团队正在处理项目漏洞问题,发现这些都是细节但又容易在项目实现的过程中忽视的部分,鉴于此,我想总结下来,方便以后出现类似问题能及时得到解决. 1.任意文件上传漏洞.   描述:允许 ...

  10. 查看MySQL是否支持InnoDB引擎以及不支持的解决办法

    通过命令行进入mysql SHOW variables like "have_%"; 显示结果中会有如下3种可能的结果: have_innodb YES have_innodb N ...