浏览器存储及使用.docx
《浏览器存储及使用.docx》由会员分享，可在线阅读，更多相关《浏览器存储及使用.docx（13页珍藏版）》请在冰豆网上搜索。
浏览器存储及使用
伴随着WEB的发展，浏览器的存储方式及技术不断的发生更改，从刚开始的Cookie，到localStorage，sessionStorage，再到IndexedDB，再到现在的WebSQL，作为一名合格的前端开发，当然需要对这些技术了如指掌并熟练掌握，本文将比较全面的介绍常见的浏览器存储以及其使用。
1.Cookie
Cookie是一个用户通过浏览器浏览网站产出的信息的票根，Cookies通常被用来标示一个网站用户的浏览经历，它可能包含这个用户的个人偏好或访问这个网站的一些输入信息。
用户可以自己随意操作他们浏览器中的Cookie。
Cookies可以通过服务端使用Set-CookieHttpheader来设置和修改，当然也可以使用javascript的document.cookie去操作。
浏览器兼容性
详细请参考：
在浏览器中操作如下：
//读取网站下所有的cookie信息，获取的结果是一个以分号;作为分割的一个字符串
varallCookies=document.cookie;
//例如：
在XX首页，获取的如下
//"BAIDUID=B32F2BF6BCB66D5559E199F5B1908F4C:
FG=1;PSTM=1444711125;BIDUPSID=9DE77BD4B191F421CA54DB11C954067A;ispeed_lsm=0;MCITY=-289%3A;BDSFRCVID=hWtsJeC62Ag8XZc4Nvqo2MixJD2vkWoTH6aoB7vKuwGS_LREoJS6EG0PtvlQpYD-KiV2ogKK0eOTHvvP;H_BDCLCKID_SF=JbADoDD-JCvbfP0kKtr_MJQH-UnLq-vUbT7Z0l8KtqjJbMnL-TOF5R_eD4c0hUTRtjcW-b7mWIQHDp_65xRh5U-9BPvN04RZLbc4KKJxbPQSVtJXQKcvMq5XhUJiB5O-Ban7LtQxfJOKHICRe5-ajxK;BD_CK_SAM=1;locale=zh;BD_HOME=0;H_PS_PSSID=1455_18241_18559_17000_15227_11651;BD_UPN=123253"
//往原来的已经存在的cookie中加入新的cookie
document.cookie="test=yui";
//当然也可以在后面加上可选择的选项键值对，例如domain，以及其他path，expires
document.cookie="test=yui;domain="
//删除cookie，就是让这个cookie值得expires过，就是设置这个expires为0
document.cookie="test=yui;domain=;expires=0"）;
需要注意的地方：
1）通过上面的代码，可以看到document.cookie是个可访问的属性，但是它有内置的setter和getter的function，而不是一个简单的字符串数据，你的get和set都会调用这些原生内置的函数；
2）Cookie支持跨域，可以通过在根域名设置cookie，共享多个子域名的数据。
Cookie的Chrome浏览器实现
Cookie解析：
2.WebStorage
WebStorage有两种机制，分别为sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage是一种半持久化的本地存储（会话级别的存储），而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
这两个对象，对外的方法主要有：
setItem、getItem，以键值对的形式存储和读取，key按照索引获取当前存储的key值，找不到时返回null，length属性代表当前存储的keyvalue对数。
浏览器兼容性
详细请参考：
代码示例（以localStorage为例）
varusername='helloworld';
varstorageUsername;
varrandomArr=[Math.random（），Math.random（），Math.random（），Math.random（）];
varstorageRandomArr;
//storageusername，key值区分大小写，存入的内容为这个变量调用toString方法的结果
localStorage.setItem（"username"，username）;
//获取
storageUserName=localstorage.getItem（"username"）;
//"helloworld"
//删除
localStorage.removeItem（"username"）;
storageUserName=localstorage.getItem（"username"）;
//null
//存储对象时，可以先调用JSON.stringify方法，然后取出的时候再调用JSON.parse方法获取结果
localStorage.setItem（"randomarr"，JSON.stringify（randomArrr））;
storageRandomArr=JSON.parse（localStorage.getItem（"randomarr"））;
Object.prototype.toString.call（storageRandomArr）;
//"objectArray"
3.IndexDB
IndexedDB是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的API。
IndexedDB分别为同步和异步访问提供了单独的API，异步API方法调用完后会立即返回，而不会阻塞调用线程。
要异步访问数据库，要调用Window对象IndexedDB属性的open（）方法。
该方法返回一个IDBRequest对象（IDBOpenDBRequest）；异步操作通过在IDBRequest对象上触发事件来和调用程序进行通信。
IndexDb是NoSQL数据库，是一种支持事务的浏览器数据库，基本操作就是，打开数据库，增删改查各种。
浏览器兼容性
详细请参考：
代码示例
1）打开数据库
//处理浏览器兼容性
window.indexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB;
//如果该数据库MyDatabase不存在，则会被创建；如果已经存在，则被打开。
varrequest=window.indexedDB.open（"MyDatabase"）;
//打开数据库失败的回调
request.onerror=function（event）{
console.log（"failure"）;
};
//代开数据成功的回调
request.onsuccess=function（event）{
console.log（"success"）;
};
2）初始化数据库
vardbName="MyDatabase";
vardbVersion=2;//整数
//open函数接受的第二个参数，代表数据的版本，当打开的版本号比当前的版本号大时，会触发onupgradeneeded这个回调
varrequest=window.indexedDB.open（dbName，dbVersion）;
varstudentsData=[{
id:
"001"，name:
"xiaoming"，email:
0
}，{
id:
"002"，name:
"xiaoxiang"，email:
1
}];
vartableName='students';
request.onerror=function（event）{
//错误处理
};
request.onupgradeneeded=function（event）{
vardb=event.target.result;
//创建表，以id字段作为主键来确保唯一，使用keyPath表示
varobjectStore=db.createObjectStore（tableName，{keyPath:
"id"}）;
//给表添加索引
objectStore.createIndex（"name"，"name"，{unique:
false}）;//非unique索引
objectStore.createIndex（"email"，"email"，{unique:
true}）;//email字段作为unique索引
for（variinstudentsData）{
//插入数据
objectStore.add（studentsData[i]）;
}
console.log（"---initdbsuccess---"）;
}
3）使用事务添加、删除数据
transaction（）方法接受两个参数并返回一个事务对象。
第一个参数是事务希望跨越的对象存储空间的列表，即数据库中的表名称。
如果你希望事务能够跨越所有的对象存储空间你可以传入一个空数组。
第二个参数如果你没有为第二个参数指定任何内容，默认只读。
插入学生003，004，005
vardbName="MyDatabase";
varrequest=window.indexedDB.open（dbName）;
varaddData=[{
id:
"003"，name:
"xiaofang1"，email:
"3@"
}，{
id:
"004"，name:
"xiaofang2"，email:
"4@"
}，{
id:
"005"，name:
"xiaofang3"，email:
"5@"
}];
vartableName='students';
//打开数据库失败的回调
request.onerror=function（event）{
console.log（"openindexDbdatabasefailure"）;
};
//代开数据成功的回调
request.onsuccess=function（event）{
vardb=event.target.result;
vartransaction=db.transaction（[tableName]，'readwrite'）;
varobjectStore;
vari;
//事务主要有三个回调，error，abort，success
transaction.on
升级会员 