資訊專欄INFORMATION COLUMN
摘要：中新增了的規(guī)范，目的是解決客戶端存儲數(shù)據(jù)，而無需將數(shù)據(jù)持續(xù)的發(fā)回服務(wù)器。的兩個實例提供了以下五個方法刪除所有值中沒有實現(xiàn)。刪除由指定的名值對。根據(jù)指定的獲取對應(yīng)的值。
HTML5中新增了Web Storage的規(guī)范，目的是解決客戶端存儲數(shù)據(jù)，而無需將數(shù)據(jù)持續(xù)的發(fā)回服務(wù)器。它提供了兩個對象sessionStorage和localStorage，這兩個對象都是以windows對象屬性的形式存在的，區(qū)別在于localStorage存儲的數(shù)據(jù)不會過期，sessionStorage存儲的數(shù)據(jù)每次關(guān)閉瀏覽器后都會被清空。
為什么出這個擴展類Web Storage的出現(xiàn)解決了cookie不適合瀏覽器存儲大量數(shù)據(jù)和每次請求時，cookie都會存放在請求頭中，傳輸?shù)椒?wù)器端的問題。
Storage的兩個實例提供了以下五個方法：
clear()：刪除所有值；Firefox中沒有實現(xiàn)。
getItem(name)：根據(jù)指定的name獲取對應(yīng)的值。
key(index)：獲得index位置處的值的名字。
removeItem(name)：刪除由name指定的名值對。
setItem(name,value)：為指定的name設(shè)置一個對應(yīng)的值。
雖然Storage的幾個方法調(diào)用很簡單，但是只能存儲字符串格式的數(shù)據(jù)，這給實際編碼過程中帶來了很大的困擾，比如：當我存入一個Object數(shù)據(jù)時，每次存入之前都要數(shù)據(jù)轉(zhuǎn)化成字符串，取出使用的時候也要將字符串再轉(zhuǎn)化為對象，并且人為的要記住存入值的格式。
所以，為了減少重復(fù)勞動，以后少些重復(fù)代碼，順便提升下效率，所以做了一個封裝。
兩個操作對象EStorage.session和EStorage.local，分別對應(yīng)sessionStorage和localStorage
提供了8個方法
set(key,value)：為指定的key設(shè)置一個對應(yīng)的值。
remove(key)：刪除由key指定的名值對。
clear()：刪除所有值；Firefox中沒有實現(xiàn)。
update 更新(key,value)。
get(key)：根據(jù)指定的key獲取對應(yīng)的值。
keyType(key)： 對應(yīng)key值的數(shù)據(jù)類型
isexist(key)： 是否存在
getAll()： 獲取所有的值,返回object
支持七種數(shù)據(jù)格式：String，Number，Boolean，F(xiàn)unction，Date，Object，Array
特點：
1、存入什么數(shù)據(jù)類型，取出什么數(shù)據(jù)類型
2、通過原生方法存入的數(shù)據(jù)，只能取出字符串
3、與原生方法共存
4、易擴展
實際項目中用了，效果還可以，生了不少代碼，手動微笑 -_-
最后貼上全部代碼/*
EStorage.js
2017-12-25
VERSION = "1.0.0"
DATATYPE = String,Number,Boolean,Function,Date,Object,Array 支持的數(shù)據(jù)類型
*/
var EStorage = (function () {
"use strict";
var VERSION = "1.0.0";
//支持的數(shù)據(jù)類型
var DATATYPE = "String,Number,Boolean,Function,Date,Object,Array";
//存儲類型id
var KEYWORDID = "KEYWORDID";
//檢測存入數(shù)據(jù)類型
function getType(data){
var type = Object.prototype.toString.call(data)
switch(type)
{
case "[object String]":
return "String"
break;
case "[object Number]":
return "Number"
break;
case "[object Boolean]":
return "Boolean"
break;
case "[object Function]":
return "Function"
break;
case "[object Object]":
return "Object"
break;
case "[object Array]":
return "Array"
break;
case "[object Date]":
return "Date"
break;
}
}
//獲取值并根據(jù)類型轉(zhuǎn)換
function getValue(type,item){
switch(type)
{
case "String":
return item
break;
case "Number":
return Number(item)
break;
case "Boolean":
var value;
return value = (item ==="true") ? true : false;
break;
case "Function":
var fun=(new Function("return "+item))();
return fun;
break;
case "Object":
return JSON.parse(item);
break;
case "Array":
return JSON.parse(item);
break;
case "Date":
return new Date(item);
break;
default:
return item;
}
}
//存儲類
function EStorage(){
this.VERSION = VERSION;
this.DATATYPE = DATATYPE;
}
//會話級存儲類
EStorage.prototype.session = {
data:window.sessionStorage,
//新增或更新會話級數(shù)據(jù)
set:function(key,data){
var type = getType(data);
var saveData = "";
if(type === "String" || type === "Number" || type === "Boolean" || type === "Function" || type === "Date"){
saveData = "".concat(data);
}else if(type === "Object" || type === "Array"){
saveData = "".concat(JSON.stringify(data));
}
this.data.setItem(key,saveData);
if(key !==KEYWORDID){
updateKeys(key,type,"set","session");
}
},
//獲取會話級數(shù)據(jù)
get:function(key){
if(!isexist(key,"session")){
return;
}else{
var sessionKeys = getKeys("session");
var item = this.data.getItem(key);
return getValue(sessionKeys[key],item);
}
},
//獲取所有會話級數(shù)據(jù)
getAll:function(){
var obj={};
for(var i in this.data){
//filter,只輸出sessionS的私有屬性
if (this.data.hasOwnProperty(i) && i !==KEYWORDID) {
obj[i] = this.get(i)
};
}
return obj;
},
//校驗是否存在某個值
isexist:function(key){
return isexist(key,"session");
},
//清除會話級數(shù)據(jù)
clear:function(){
this.data.clear();
this.set(KEYWORDID,{KEYWORDID:"Object"});
},
//更新key值
update:function(key,data){
if(!isexist(key,"session")) {
return;
}
this.set(key,data);
},
//刪除key值
remove:function(key){
if(!isexist(key,"session") || key ==="") {
return;
}
this.data.removeItem(key);
updateKeys(key,"","remove","session")
},
//獲取數(shù)據(jù)類型
keyType:function(key){
var sessionKeys = getKeys("session");
if(isexist(key,"session")) {
return sessionKeys[key];
}
}
}
//磁盤存儲類
EStorage.prototype.local = {
data:window.localStorage,
set : function(key,data){ //新增或更新瀏覽器永久數(shù)據(jù)
var type = getType(data);
var saveData = "";
if(type === "String"
|| type === "Number"
|| type === "Boolean"
|| type === "Function"
|| type === "Date"){
saveData = "".concat(data);
}else if(type === "Object" || type === "Array"){
saveData = "".concat(JSON.stringify(data));
}
this.data.setItem(key,saveData);
if(key !==KEYWORDID){
updateKeys(key,type,"set","local");
}
},
//獲取key值
get:function(key){
if(!isexist(key,"local")){
return;
}else{
var localKeys = getKeys("local");
var item = this.data.getItem(key);
return getValue(localKeys[key],item);
}
},
//獲取所有永久數(shù)據(jù)
getAll:function(){
var obj={};
for(var i in this.data){
//filter,只輸出sessionS的私有屬性
if (this.data.hasOwnProperty(i) && i !==KEYWORDID) {
obj[i] = this.get(i)
};
}
return obj;
},
//校驗是否存在某個值
isexist:function(key){
return isexist(key,"local");
},
//清除瀏覽器永久數(shù)據(jù)
clear:function(){
this.data.clear();
},
//更新key值
update:function(key,data){
if(!isexist(key,"local")) {
return;
}
this.set(key,data);
},
//刪除key值
remove:function(key){
if(!isexist(key,"local")) {
return;
}
this.data.removeItem(key);
updateKeys(key,"","remove","local")
},
//獲取數(shù)據(jù)類型
keyType:function(key){
var localKeys = getKeys("local");
if(isexist(key,"local")) {
return localKeys[key];
}
}
}
var storage = new EStorage()
if(!sessionStorage.getItem(KEYWORDID)){
storage.session.set(KEYWORDID,{KEYWORDID:"Object"});
}
if(!localStorage.getItem(KEYWORDID)){
storage.local.set(KEYWORDID,{KEYWORDID:"Object"});
}
//是否存在
function isexist(key,type){
if(type ==="session"){
var flag = (key && sessionStorage.getItem(key)) ? true : false;
// var sessionKeys = getKeys("session");
// var flag = (key && sessionKeys[key]) ? true : false;
return flag;
}else if(type ==="local"){
// var localKeys = getKeys("local");
// var flag = (key && localKeys[key]) ? true : false;
var flag = (key && localStorage.getItem(key)) ? true : false;
return flag;
}
}
//獲取key列表
function getKeys(type){
if(type ==="session"){
var item = sessionStorage.getItem(KEYWORDID);
return getValue("Object",item);
}else if(type ==="local"){
var item = localStorage.getItem(KEYWORDID);
return getValue("Object",item);
}
}
//更新key值類型
function updateKeys(key,keytype,operate,saveType){
var keys = saveType ==="session" ? storage.session.get(KEYWORDID) : storage.local.get(KEYWORDID);
switch(operate)
{
case "set":
keys[key] = keytype;
break;
case "remove":
delete keys[key];
break;
case "clear":
for(var i in keys){
if(i !==KEYWORDID){
delete keys[i];
}
}
break;
}
saveType ==="session" ? storage.session.set(KEYWORDID,keys) :
storage.local.set(KEYWORDID,keys);
}
//對外提供接口
return storage;
}());
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94627.html
摘要：的目的就是取代進行大量的本地數(shù)據(jù)存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數(shù)據(jù)使用屬性存儲數(shù)據(jù)使用方法讀取數(shù)據(jù)使用屬性讀取數(shù)據(jù)一般來說，對存儲空間大小的限制都是以每個源協(xié)議域和端口為單位的。 前言 本文首先介紹web storage和Cookie的對比，解釋web storage的優(yōu)勢；隨后指出怎樣使用插firebug插件的擴展firestorag...
摘要：的目的就是取代進行大量的本地數(shù)據(jù)存儲，其中不能進行跨會話存儲，這可以使用彌補。刪除由指定的名值對兒。使用方法存儲數(shù)據(jù)使用屬性存儲數(shù)據(jù)使用方法讀取數(shù)據(jù)使用屬性讀取數(shù)據(jù)一般來說，對存儲空間大小的限制都是以每個源協(xié)議域和端口為單位的。 前言 本文首先介紹web storage和Cookie的對比，解釋web storage的優(yōu)勢；隨后指出怎樣使用插firebug插件的擴展firestorag...
摘要：一概念簡述是由淘寶開發(fā)平臺部資深架構(gòu)師余慶開發(fā)，是一個輕量級高性能的開源分布式文件系統(tǒng)，用純語言開發(fā)，包括文件存儲文件同步文件訪問上傳下載存取負載均衡在線擴容相同內(nèi)容只存儲一份等功能，適合有大容量存儲需求的應(yīng)用或系統(tǒng)。故障恢復(fù)后，再次奪回。 一、概念簡述 FastDFS 是由淘寶開發(fā)平臺部資深架構(gòu)師余慶開發(fā)，是一個輕量級、高性能的開源分布式文件系統(tǒng)( Distributed File ...
閱讀 1632·2021-09-08 10:42
閱讀 3615·2021-08-11 10:23
閱讀 3990·2019-08-30 14:10
閱讀 2743·2019-08-29 17:29
閱讀 3099·2019-08-29 12:50
閱讀 651·2019-08-26 13:36
閱讀 3464·2019-08-26 11:59
閱讀 1498·2019-08-23 16:23
