文档章节

HT5本地存储(web sql、sessionStorage、localStorage)

透笔度
 透笔度
发布于 2016/03/25 16:05
字数 1756
阅读 204
收藏 0

我们知道js写的效果,每次刷新都是从新执行,是不存在记录操作的,主要是大部分的效果不需要这样的处理(一个tab切换,焦点图肯定不需要记住运行到哪里,刷新从新开始就好了)!

在html5之前,前端写的效果真的需要存储一些记录,我们都是使用cookie,对于网站换肤其实可以使用这个处理,今天我们介绍的sessionStorage和localStorage其实就是类似cookie的东西,不过他比cookie存储更大,操作更加容易,更符合我们的使用习惯。

 

一.cookie的使用

我们先回忆cookie的使用:

1.cookie的读取

document.cookie="userId=01"; 
document.cookie="userName=hulk";
alert(document.cookie);

我们会看到设置的内容,我们知道汉字很特殊,作为值设置我们会使用escape进行编码处理,和unescape解码

2.cookie设置过期

document.cookie="userId=828; expiress=GMT_String";
这个就非常重要了,我们一般会选择3天,7天或者1个月,这样我们把用户的账户存入cookie,下次就可以在不超出过期时间内直接登录了,延时的话我们会利用date对象并且转为gmt形式。

3.cookie删除

我们知道到了设置的过期时间会删除cookie,我们对cookie的删除就是把过期设置到当前日期之前的日子

4.cookie详细介绍

对于cookie的具体操作我们可以看我的这篇介绍:http://my.oschina.net/tbd/blog/490310 介绍内容在博客中间位置。

5.基于cookie的tab切换效果

其原理就是把点击所在的索引存入cookie,每次刷新页面会读取cookie的这个数值做tab默认位置的设置,上面说这种处理是在开玩笑,不过这个例子更让大家容易。

大家在服务器环境下运行,涉及到存储这一块:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>cookie</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div style=" height:300px; width:300px;">
 <div id="list" style=" height:50px; line-height:50px; background:#CC6;">
     <span>标题1</span>
        <span>标题2</span>
        <span>标题3</span>
    </div>
    <div id="con" style=" height:250px;">
     <div style="height:250px;">内容1</div>
        <div style="height:250px;">内容2</div>
        <div style="height:250px;">内容3</div>
    </div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
 //cookie索引位置获取
 var cookiei=null;
 var strCookie=document.cookie; 
 var cookielist=strCookie.split(";");
 var key="ys";
 for(var i=0;i<cookielist.length;i++){ 
  //alert(unescape(cookielist[i].split("=")[1]));
     if(cookielist[i].split("=")[0]=="ys"){
      cookiei=unescape(cookielist[i].split("=")[1]);
     };
 };
 var st=0;
 var real=cookiei||st;
 //选择器查找
 var list=document.getElementById("list"); 
 var listspan=list.getElementsByTagName("span")
 var con=document.getElementById("con");
 var condiv=con.getElementsByTagName("div");
 //初始化设置,有cookie根据cookie设置无默认用第一个
 for(var i=0;i<listspan.length;i++){
  if(i==real){
   listspan[i].style.color="#fff";
   condiv[i].style.display="block";
  }else{
   listspan[i].style.color="#000";
   condiv[i].style.display="none";
  };
 };
 //事件设置
 for(var i=0;i<listspan.length;i++){
  listspan[i].onclick=function(){
     //alert(this.innerHTML)
    for(var j=0;j<listspan.length;j++){
    if(listspan[j]==this){
      listspan[j].style.color="#fff";
      condiv[j].style.display="block";
      document.cookie="ys="+escape(j); 
    }else{
     listspan[j].style.color="#000";
      condiv[j].style.display="none"
    };
      };
  };
 };
 
};
</script>
</html>

我们点击到第三个,我们在此刷新发现会定位到第三个显示,实现了记忆处理。

 

二.sessionStorage、localStorage 本地存储帝时代

上面涉及到了cookie的介绍,cookie是放在document下,我们感觉有些不能适应是不是,应该在window下吧,好吧就是在document下,不过我们ht5的新特性:

window.sessionStorage
window.localStorage

实实在在是在window下。我们一定要记住使用时用哪个对象,与cookie区分。

1.设置localStorage

localStorage.a1 = "aaa";
localStorage["a2"] = "bbb";
localStorage.setItem("a3","ccc");

前2个和操作对象一样,后面是提供的方法处理

2.获取localStorage

alert(localStorage.a1);
alert(localStorage["a2"]);
alert(localStorage.getItem("a3"));

同设置,最后的是方法获取

3.删除localStorage

localStorage.removeItem("a3");//清除c的值
alert(localStorage.getItem("a3"));

清除后,返回null,除了单个清除还有全部清除:

localStorage.clear();
alert(localStorage.a1);
alert(localStorage["a2"]);
alert(localStorage.getItem("a3"));

另一个用法和local差不多就不在做介绍,只不过session会在关闭页面后自动删除,同服务端的session一样机制。

 

三.Html5数据库 web SQL

ht5的新特性中,为我们添加了数据库的处理功能,我们可以向服务端一样创建数据库,数据表,增删改查了。

Html5数据库API是以一个独立规范形式出现,它包含三个核心方法:

1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

2、transaction:这个方法允许我们根据情况控制事务提交或回滚。

3、executeSql:这个方法用于执行真实的SQL查询。

下面是一个使用的实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>web sql</title>
    <style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
</style>
</head>
<body>
<div id="status"></div> 
</body>
<script type="text/javascript">
var db = openDatabase('demodb', '1.0', 'demo', 2 * 1024 * 1024);  
  
db.transaction(function (tx) { 
    tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id unique, name ,sex)');  
    tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (1, "小刚" ,"男")');  
    tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (2, "小红" ,"女")');  
    tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (3, "小明" ,"男")');  
  
});
db.transaction(function (tx) { 
    tx.executeSql('SELECT * FROM USERS', [], function (tx, results) { 
  var status=document.getElementById("status");
  var rows = results.rows;  
  for(var i=0;i<rows.length;i++){
   var arr=document.createElement("div");
   arr.innerHTML=rows[i].name+"--"+rows[i].sex;
   status.appendChild(arr);
  };
    
 }, null);  
});  
</script>
</html>

我们了解其中的的各个使用方法:

1.打开数据库

openDatabase('demodb', '1.0', 'demo', 2 * 1024 * 1024); 

打开数据库,没有时创建,第一个参数demodb是数据库名称,第三个参数demo是描述,第四个是的大小

2.执行处理

db.transaction(function (tx) {

 

});

我们的所有数据表的处理程序都在在这个内部。

3.创建表

tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id unique, name ,sex)'); 

创建表 USERS,没有时会创建,定义有三个字段,id字段不能重复

4.插入记录

tx.executeSql('INSERT INTO USERS (id, name ,sex) VALUES (1, "小刚" ,"男")'); 

给哪个表插入,哪些字段插入

5.获取记录

tx.executeSql('SELECT * FROM USERS', [], function (tx, results) {

 

}, null); 

设置查询条件,会在回调的results拿到查询记录,在results.rows中存放我们的记录集合:

记录形式:

[

{id:1,name:"小明",sex:"男"},

{},

{}

]

都是固定的使用规则,我们如果会sql直接可以使用,不会的话看手册也就直接可以使用的。

 

四.总结

1.cookie就不用多说了,我们要注意的就是使用是document.cookie,

他的赋值形式是key=val;key2=val2

删除时时利用过期时间,过期时间是date的gmt格式

对于中文等设置和获取要使用escape编码和解码。

 

2.sessionStorage等是在window下,和object一样的使用规则,同样我自己单出的设置,获取删除和统一删除方法

 

3.web SQL其实就是本地数据库的处理形式,利用sql语句去处理记录内容,其实在没有出现之前我们利用json也会模拟处理。

 

 

© 著作权归作者所有

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
分享6个实用的HTML5本地存储(Local Storage)教程

日期:2011/12/12 来源:GBin1.com HTML5 中最强大并且最具有魅力的特性在于本地存储,使用本地存储可以大大的节约服务器端的压力,并且可以有效的利用客户端的计算性能。使用HTML5可以在客户...

gbin1
2011/12/12
2.9K
1
[IBM DW] 使用 HTML5 开发离线应用

简介: Web2.0 技术鼓励个人的参与,每个人都是 Web 内容的撰写者。如果 Web 应用能够提供离线的功能,让用户在没有网络的地方(例如飞机上)和时候(网络坏了),也能进行内容撰写,等到有网...

红薯
2010/11/28
734
2
HTML5-Web SQL Database

在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的负担,使Web时...

iNiL0119
2015/03/22
238
0
html5 sessionStorage 与 localStorage使用详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

Adam-Lee
2012/08/22
16.8K
1
HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

lg2045
2014/10/09
90
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
6
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
8
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部