> >

Code

$("#button1").on('click', function() {
	alert('jo');
});

HTML

Resultaat

Start

LocalStorage

每一个人都值得最好的东西！

Cookies

Cookies(小甜点)听起来很好吃，但实际上并不是。每次HTTP接受和发送都会传递Cookies数据，它会占用额外的流量。
例如，如果你有一个10KB的Cookies数据，发送10次请求，那么，总计就会有100KB的数据在网络上传输。Cookies只能是字符串。浏览器里存储Cookies的空间有限，很多用户禁止浏览器使用Cookies。所以，Cookies只能用来存储小量的非关键的数据。

cookie用法

Jquery cookie操作

1.创建一个会话cookie

$.cookie(‘cookieName’,'cookieValue’);

2.创建一个持久cookie

$.cookie(‘cookieName’,'cookieValue’，｛expires：7｝);

3.创建一个持久并带有效路径的cookie

$.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'｝);

4.获取cookie

$.cookie(‘cookieName’);

5.删除cookie

$.cookie(‘cookieName’,null);

localStorage

localStorage 拥有本地5兆的容量可以存储，而cookie却只有4K，这是完全不能比的优势。

localStorage.setItem(key,value);//保存数据

localStorage.getItem(key);//读取数据

localStorage.removeItem(key);//删除单个数据

localStorage.clear();//删除所有数据

key：localStorage.key(index);//得到某个索引的值

github上面有很多兼容store的库。例如：store.js

Web SQL

WebSQL也是一种在浏览器里存储数据的技术，跟IndexedDB不同的是， IndexedDB更像是一个NoSQL数据库，而WebSQL更像是关系型数据库，使用SQL查询数据。W3C已经不再支持这种技术。具体情况可以请看：http://www.w3.org/TR/webdatabase

因为不再支持，所以你就不要在项目中使用这种技术了。

IndexDB

IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。 IndexedDB可以有很多objectStore，objectStore里可以有很多对象。每个对象可以用key值获取。

IndexedDB的用法

IndexDB用法

IndexedDB的用法
 IndexedDB DEMO

打开一个IndexedDB数据库

首先，你需要知道你的浏览器是否支持IndexedDB。请使用最新版的谷歌浏览器或火狐浏览器。低版本的IE是不行的。

window.indexedDB = window.indexedDB || window.mozIndexedDB
    || window.webkitIndexedDB || window.msIndexedDB;
if(!window.indexedDB)
{
    console.log("你的浏览器不支持IndexedDB");
}

一旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。

var request = window.indexedDB.open("testDB", 2);

IndexedDB的用法

往ObjectStore里新增对象

为了往数据库里新增数据，我们首先需要创建一个事务，并要求具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行。

var transaction = db.transaction(["students"],"readwrite");
transaction.oncomplete = function(event) {
    console.log("Success");
};

transaction.onerror = function(event) {
    console.log("Error");
};
var objectStore = transaction.objectStore("students");

objectStore.add({rollNo: rollNo, name: name});

IndexedDB的用法

从ObjectStore里删除对象

删除跟新增一样，需要创建事务，然后调用删除接口，通过key删除对象。
语句合并到了一起，变得更简单，但效果是一样的。

db.transaction(["students"],"readwrite").objectStore("students")
    .delete(rollNo);

IndexedDB的用法

通过key取出对象

往get()方法里传入对象的key值，取出相应的对象。

var request = db.transaction(["students"],"readwrite")
    .objectStore("students").get(rollNo);
request.onsuccess = function(event){
    console.log("Name : "+request.result.name);
};

IndexedDB的用法

更新一个对象

为了更新一个对象，首先要把它取出来，修改，然后再放回去。

var transaction = db.transaction(["students"],"readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
    console.log("Updating : "+request.result.name + " to " + name);
    request.result.name = name;
    objectStore.put(request.result);
};

IndexedDB的用法