前端存储-cookie-sessionStorage-loacalStorage

0. cookie

h5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。
主要应用:购物车、客户登录
对于IE浏览器有UserData,大小是64k,只有IE浏览器支持。

1.本地存储localstorage
存储方式:
以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。
 
大小:
每个域名5M
 
支持情况:
前端存储-cookie-sessionStorage-loacalStorage_第1张图片
注意:IE9 localStorage不支持本地文件,需要将项目署到服务器,才可以支持!
 
检测方法:
1
2
3
4
5
if(window.localStorage){
  alert('This browser supports localStorage');
}else{
  alert('This browser does NOT support localStorage');
}
 
常用的API:

getItem //取记录

setIten//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

前端存储-cookie-sessionStorage-loacalStorage_第2张图片

存储的内容:

数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)


2.本地存储-sessionStorage
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。


3.web SQL

关系数据库,通过SQL语句访问
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
 
支持情况:
 Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
 

核心方法:

①openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。

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

 

打开数据库:

1
2
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法对应的五个参数分别为:数据库名称、版本号、描述文本、数据库大小、创建回调

执行查询操作:

1
2
3
4
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) { 
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
});

插入数据: 

1
2
3
4
5
6
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
    tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
    tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

读取数据:

1
2
3
4
5
6
7
8
9
10
11
12
db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
       var len = results.rows.length, i;
       msg = "< p >查询记录条数: " + len + " p >";
       document.querySelector('#status').innerHTML +=  msg;
     
       for (i = 0; i < len; i++){
          alert(results.rows.item(i).name );
       }
     
    }, null);
});

由这些操作可以看出,基本上都是用SQL语句进行数据库的相关操作,如果你会MySQL的话,这个应该比较容易用。


转载自:http://www.cnblogs.com/LuckyWinty/p/5699117.html

你可能感兴趣的:(前端存储,web)