WEB相关存储方式

1.数据库存储
(1)数据可以共享(或数据结构化)
(2)数据独立性
(3)数据冗余大,易移植
(4)统一管理和控制

create table users(
u_id int( 10) unique not null auto_increment primary key,
u_name varchar( 20 ) unique not null,
u_email varchar( 30 ) unique not null,
u_pwd varchar (20) not null,
u_call char( 11) unique not null
)charset=utf8;

2.sessionStorage和localStorage

sessionStorage是用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage是用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

判断浏览器是否支持localStorage可以使用下面的代码:
if(window.localStorage){
  alert("浏览支持localStorage") ;
}
else{
  alert("浏览暂不支持localStorage") ;
}

localStorage和sessionStorage的基本操作:

setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "javasctipit");

getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");

removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:
sessionStorage.removeItem("key");
localStorage.removeItem("site");

clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:
sessionStorage.clear();
localStorage.clear();

定时清除localStorage:
function fun(){
var data=new Date();
if(data.getMinutes()>=36){
    localStorage.clear();
  }
}

localStorage和sessionStorage点其他操作方法:.点操作和[]
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);

显示localStorage的数据(key的用法)
var storage = window.localStorage;
for (var i=0;i < storage.length; i++){
  var key = storage.key(i);
  var value = storage.getItem(key);
  console.log(key + ":" + value);
};

3.cookie
写入cookie;
function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值
{
  var date = new Date();
  date.setDate(date.getDate()+30);//设置此cookie保存30天
  document.cookie = name + "="+ escape (value) + ";expires=" + date.toUTCString();
}
读取cookie的值
function getCookie(name)//取cookies函数
{
  var ary = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
  if(ary != null) return unescape(ary[2]); return null;
}
删除cookie
function delCookie(name)//删除cookie函数
{
  var date = new Date();
  date.setTime(date.getTime() - 1);
  var val=getCookie(name);
  if(val!=null) document.cookie= name + "="+val+";expires="+date.toUTCString();
}

4.websql;
var db;
function createDB(){
//创建或连接数据库
  db = openDatabase("f15","","测试数据库",1024*1024,function(){
    if(db){
      console.log("创建或连接成功");
    }else{
      console.log("创建或连接失败");
    }
  });
}

function dropDB(){
//删除数据库
    db.transaction(function(fx){
    fx.executeSql("drop database f15",[],function(){
      alert("删除数据库成功");
    },function(fx,error){
      console.log(error);
      alert("删除失败:"+error);
    });
  });
}
function createTable(){
//创建表
  db.transaction(function(fx){
    fx.executeSql("create table t_student(s_id integer primary key autoincrement,s_name varchar(20))",[],function(){
      alert("建表成功");
    },function(fx,error){
      console.log(error);
      alert("建表失败:"+error);
    });
  });
}
function dropTable(){
//删除表
  db.transaction(function(fx){
    fx.executeSql("drop table t_student",[],function(){
      alert("删除成功");
    },function(fx,error){
      console.log(error);
      alert("删除失败:"+error);
    });
  });
}
function add(){
  //增加数据
  db.transaction(function(fx){
    fx.executeSql("insert into t_student(s_name) values(?)",["阿三"],function(){
      alert("增加成功");
    },function(fx,error){
      console.log(error);
      alert("增加失败:"+error);
    });
  });
}
function search(){
//查询数据
  db.transaction(function(fx){
    fx.executeSql("select * from t_student",[],function(fx,result){
      // alert(result.rows.length);
      for(var i = 0;i < result.rows.length;i++){
        alert(result.rows.item(i).s_id + " "+result.rows.item(i).s_name);
      }
    },function(fx,error){
      console.log(error);
      alert("增加失败:"+error);
    });
  });
}
function deleteDate(id){
//删除数据
    db.transaction(function(fx){
      fx.executeSql("delete from t_student where s_id=? ",[id],function(){

    },function(fx,error){
      console.log(error);
      alert("删除失败:"+error);
    });
  });
}
function amendDate(name,id){
//修改数据
    db.transaction(function(fx){
      fx.executeSql("update t_student set s_name=? where s_id=? ",[name,id],function(){

    },function(fx,error){
      console.log(error);
      alert("修改失败:"+error);
    });
  });
}

时间: 2024-10-20 00:24:05

WEB相关存储方式的相关文章

HTML5 Web 客户端五种离线存储方式汇总

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及FileSystem四种本地离线存储方式,对燃气监控系统的表计位置.朝向.开关以及表值等信息做了CURD的存取操作. HTML5的存储还有一种Web SQL Database方式,虽然还有浏览器支持,是唯一的关系数据库结构的存储,但W3C以及停止对其的维护和发展,所以这里我们也不再对其进行介绍:Bewa

js Web存储方式

JSON是数据交互中最常用的一种数据格式. 由于各种语言的语法都不同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串> 传递之后,可以讲JSON字符串,在解析为JSON对象. JSON 对象的用法与js中的对象基本相同,唯一需要区别的是,JSON中的键,必须是字符串. JSON 名称/值对 JSON 数据的书写格式是:名称/值对. eg:   "name" : "1111" JSON 值 JSON 值可以是: ● 数字(整数或浮点数) ● 字

Html5 Web的5中离线存储方式之localStorage

Html5 Web的5中离线存储方式之localStorage 在HTML5越来越流行的今天,如果你还不知道离线存储,那就说明你落后了很多. HTML5的离线存储方式有多种:Web SQL Database.LocalStorage.Cookie.WebStorage.IndexedDB.FileSystem. Web SQL Database目前虽然还有浏览器支持,是唯一的关系数据库结构的存储,但W3C以及停止对其的维护和发展.我就不多说了. 今天我们主要看LocalStorage这种最简单的

h5中五大存储方式

h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k,只有IE浏览器支持. 目标 解决4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏览器 1.本地存储localstorage 存储方式: 以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除. 大小: 每个域名5M 支持情况: 注意:IE9 localStorag

session的存储方式和配置

Session又称为会话状态,是Web系统中最常用的状态,用于维护和当前浏览器实例相关的一些信息.我们控制用户去权限中经常用到Session来存储用户状态,这篇文章会讲下Session的存储方式.在web.config中如何配置Session.Session的生命周期等内容. 1.Session的存储方式. session其实分为客户端Session和服务器端Session. 当用户首次与Web服务器建立连接的时候,服务器会给用户分发一个 SessionID作为标识.SessionID是一个由2

前端HTML5几种存储方式的总结

来自:小蚊 - 博客园 链接:http://www.cnblogs.com/LuckyWinty/p/5699117.html   总体情况 h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k,只有IE浏览器支持. 目标 解决4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏览器 1.本地存储localstorage 存储方式: 以键值

前端几种存储方式的总结

接下来要好好总结一些知识,秋招来啦...虽然有好多知识都不大会,但是还是要努力一下,运气这种东西,谁知道呢~ 总体情况 h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k,只有IE浏览器支持. 目标 解决4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏览器 1.本地存储localstorage 存储方式: 以键值对(Key-Value

介绍HTML5几种存储方式

总体情况 h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k,只有IE浏览器支持. 下面就跟兄弟连(www.lampbrother.net )HTML5课程一起来学习HTML5几种存储方式: 目标 解决4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏览器 1.本地存储localstorage 存储方式: 以键值对(Key-Value)

字节序转换与结构体位域(bit field)值的读取 Part 2 - 深入理解字节序和结构体位域存储方式

上一篇文章讲解了带位域的结构体,在从大端机(Big Endian)传输到小端机(Little Endian)后如何解析位域值.下面继续深入详解字节序,以及位域存储的方式. (1) 我们知道,存储数字时,对小端机而言,数字的低位,存在低地址,高位存在高地址.大端机正相反. (2) 读取的方式,也是一样的.对于小端机,读出的低地址位作为数字的低位. (3) 此外Big-Endian/Little-Endian存储顺序,不仅仅针对字节,还针对字节内的比特位.对于小端机而言,字节内的8个比特,低地址端比