时间:2021-07-01 10:21:17 帮助过:3人阅读
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
众所周知Html4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie。但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据,复杂的数据就更别扯了。
下面是Cookie的限制:
Html5的设计者们,一开始就为Html5能成为富客户端做好了准备。为了破解Cookie的一系列限制,Html5通过JS的新的API就能直接存储大量的数据到客户端浏览器,而且支持复杂的本地数据库,让JS简直就是逆天了。Html5支持两种的WebStorage,一种是永久性的本地存储(localStorage),另外一种是会话级别的本地存储(sessionStorage)。
- <span style="font-family: ‘Microsoft YaHei‘;"><span style="color: #008000;">/*</span><span style="color: #008000;">*
- * sessionStorage,localStorage统一的操作方法:
- * (1)setItem(key,value):添加本地存储数据。
- * (2)getItem(key):通过key获取相应的Value。
- * (3)removeItem(key):通过key删除本地数据。
- * (4)clear():清空数据。
- </span><span style="color: #008000;">*/</span>
- <span style="color: #008000;">/*</span><span style="color: #008000;">*
- * 会话级别的本地存储:sessionStorage
- </span><span style="color: #008000;">*/</span><span style="color: #000000;">
- sessionStorage.setItem(</span>11,"a"<span style="color: #000000;">);
- </span><span style="color: #0000ff;">var</span> numLocal = sessionStorage.getItem(11<span style="color: #000000;">);
- console.info(</span>"sessionStorage会话级别的本地存储"+<span style="color: #000000;">numLocal);
- sessionStorage.setItem(</span>22,"b"<span style="color: #000000;">);
- console.info(</span>"sessionStorage会话级别的本地存储个数:"+<span style="color: #000000;">sessionStorage.length);
- sessionStorage.removeItem(</span>22<span style="color: #000000;">);
- console.info(</span>"sessionStorage会话级别的本地存储个数:"+<span style="color: #000000;">sessionStorage.length);
- </span><span style="color: #008000;">//</span><span style="color: #008000;">sessionStorage.clear();</span>
- console.info("sessionStorage会话级别的本地存储个数:"+<span style="color: #000000;">sessionStorage.length);
- </span><span style="color: #008000;">/*</span><span style="color: #008000;">*
- * 永久本地存储:localStorage
- </span><span style="color: #008000;">*/</span><span style="color: #000000;">
- localStorage.setItem(</span>"a",11<span style="color: #000000;">);
- </span><span style="color: #0000ff;">var</span> numLocal = localStorage.getItem("a"<span style="color: #000000;">);
- console.info(</span>"localStorage永久本地存储"+<span style="color: #000000;">numLocal);
- localStorage.setItem(</span>"b",22<span style="color: #000000;">);
- console.info(</span>"localStorage本地存储个数:"+<span style="color: #000000;">localStorage.length);
- localStorage.removeItem(</span>"a"<span style="color: #000000;">);
- console.info(</span>"localStorage本地存储个数:"+<span style="color: #000000;">localStorage.length);
- </span><span style="color: #008000;">//</span><span style="color: #008000;">localStorage.clear();</span>
- console.info("localStorage本地存储个数:"+localStorage.length);</span>
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
如果你是一个 Web 后端程序员,应该很容易理解 SQL 的操作。
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
- <span style="font-family: ‘Microsoft YaHei‘;"><span style="color: #008000;">/*</span><span style="color: #008000;">*
- * 本地数据库
- * 操作本地数据库的最基本的步骤是:
- * 第一步:openDatabase方法:创建一个访问数据库的对象。
- * 第二步:使用第一步创建的数据库访问对象来执行transaction方法,通过此方法可以设置一个开启事务成功的事件响应方法,在事件响应方法中可以执行SQL.
- * 第三步:通过executeSql方法执行查询,当然查询可以是:CRUD。
- </span><span style="color: #008000;">*/</span>
- <span style="color: #0000ff;">function</span><span style="color: #000000;"> dataBaseCRUD(){
- </span><span style="color: #0000ff;">var</span> dataBase = openDatabase("school", "1.0", "学校数据库", 1024 * 1024, <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
- console.info(</span>"创建学校数据库成功!"<span style="color: #000000;">);
- });
- </span><span style="color: #008000;">/*</span><span style="color: #008000;">*
- * (1)openDatabase方法打开一个已经存在的数据库,如果数据库不存在,它还可以创建数据库。几个参数意义分别是:
- * 1,数据库名称。
- * 2,数据库的版本号,目前来说传个1.0就可以了,当然可以不填;
- * 3,对数据库的描述。
- * 4,设置分配的数据库的大小(单位是kb)。
- * 5,回调函数(可省略)。
- </span><span style="color: #008000;">*/</span>
- <span style="color: #0000ff;">if</span>(!<span style="color: #000000;">dataBase){
- console.info(</span>"当前浏览器不支持Html5本地数据库"<span style="color: #000000;">);
- </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">false</span><span style="color: #000000;">;
- }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
- </span><span style="color: #0000ff;">debugger</span><span style="color: #000000;">;
- dataBase.transaction(</span><span style="color: #0000ff;">function</span> (ts) {<span style="color: #008000;">//</span><span style="color: #008000;">启动一个事务,并设置回调函数</span>
- ts.executeSql("create table if not exists Student(id int,name text null,age int,sex text null)",[],<span style="color: #0000ff;">function</span><span style="color: #000000;">(ts,result){
- console.info(</span>"创建数据库成功"+<span style="color: #000000;">result);
- },</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(ts,message){
- console.info(</span>"创建数据库失败"<span style="color: #000000;">,message);
- });
- });
- dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
- ts.executeSql(</span>"insert into Student(id,name,age,sex) values(?,?,?,?) ", [1,"小明", 21, "男"], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
- console.info(</span>"插入数据成功!"+<span style="color: #000000;">result);
- }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
- console.info(</span>"插入数据失败!"+<span style="color: #000000;">message);
- });
- });
- dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
- ts.executeSql(</span>"insert into Student(id,name,age,sex) values(?,?,?,?) ", [2,"小红", 20, "女"], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
- console.info(</span>"插入数据成功!"+<span style="color: #000000;">result);
- }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
- console.info(</span>"插入数据失败!"+<span style="color: #000000;">message);
- });
- });
- dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
- ts.executeSql(</span>"update Student set name = ? where id = ? ", ["小红s",2], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
- console.info(</span>"更新数据成功!"+<span style="color: #000000;">result);
- }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
- console.info(</span>"更新数据失败!"+<span style="color: #000000;">message);
- });
- });
- dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
- ts.executeSql(</span>"delete from Student where id = ? ", [2], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
- console.info(</span>"删除数据成功!"+<span style="color: #000000;">result);
- }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
- console.info(</span>"删除数据失败!"+<span style="color: #000000;">message);
- });
- });
- dataBase.transaction(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts) {
- ts.executeSql(</span>"select * from Student ", [], <span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, result) {
- </span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (result) {
- </span><span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i = 0; i < result.rows.length; i++<span style="color: #000000;">) {
- console.info((result.rows.item(i)));
- }
- }
- console.info(</span>"查询数据成功!"<span style="color: #000000;">);
- }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (ts, message) {
- console.info(</span>"查询数据失败!"+<span style="color: #000000;">message);
- });
- });
- }
- </span><span style="color: #008000;">/*</span><span style="color: #008000;">*
- * (2)db.transaction方法可以设置一个回调函数,此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以进行执行Sql脚本,跟下面的步骤可以结合起来。
- * (3)通过executeSql方法执行查询。
- * ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
- * 参数说明:
- * 1,sqlQuery:需要具体执行的sql语句,可以是create、select、update、delete;
- * 2,[value1,value2..]:sql语句中所有使用到的参数的数组,在executeSql方法中,将s>语句中所要使用的参数先用“?”代替,然后依次将这些参数组成数组放在第二个参数中
- * 3,dataHandler:执行成功是调用的回调函数,通过该函数可以获得查询结果集;
- * 4,errorHandler:执行失败时调用的回调函数;
- *
- </span><span style="color: #008000;">*/</span><span style="color: #000000;">
- }
- dataBaseCRUD();</span></span>
Html5的Web存储和WebSql
标签: