1. cookie
cookie的设计初衷是给服务端脚本用来存储少量数据的 ，该数据会在每次请求一个相关URL时传递到服务器中。cookie就像服务器给用户贴的“嗨，我叫”的贴纸一样，用户访问web站点时，这个web站点就可以读取那个服务器贴在用户身上的所有贴纸。
cookie的有效期和作用域
cookie默认的有效期很短暂，它只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就丢失了。cookie的作用域并不是局限在浏览器的单个窗口中，它的有效期和整个浏览器进程而不是单个浏览器窗口的有效期一致。一旦设置了有效期，浏览器就会将cookie数据存储在一个文件中，并且直到过了指定的有效期才会删除该文件。cookie的作用域是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下，cookie和创建它的web页面有关，并对该web页面以及该web页面同目录或者子目录的其他web页面可见。
2. sessionStorage
sessionStorage对象存储特定于某个会话的数据，也就是该数据只保存到浏览器关闭。这个对象就想会话cookie，也会在浏览器关闭后消失。存储在sessionStorage中的数据可以跨页面刷新而存在。存储在sessionStorage的数据只能由最初给对象存储数据的页面访问到，所以对多页面应用有限制。
3. localStorage
通过localStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户通过设置浏览器配置来删除。否则数据将一直保留在用户的电脑上，永不过期。localStorage的作用域是限定在文档源级别的。
4. 简单封装操作api
/**
*
*
* 从store方法名上区分了sessionStorage 和 localStorage，各自有各自的方法
*
* 增加了 has，getAll，each，serialize，deserialize 方法，
*
* 基于jquery.cookie 增加了操作cookie的方法 get，set，getAll，remove
*
**/
"use strict"
// Module export pattern from
// https://github.com/umdjs/umd/blob/master/returnExports.js
;(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.store = factory();
}
}(this, function () {
// Store.js
var store = {},
win = (typeof window != 'undefined' ? window : global),
doc = win.document,
localStorageName = 'localStorage',
sessionStorageName = 'sessionStorage',
scriptTag = 'script',
storage,_storage;
store.disabled = false;
store.setLocal = function(key, value) {};
store.getLocal = function(key, defaultVal) {};
store.hasLocal = function(key) { return store.getLocal(key) !== undefined };
store.removeLocal = function(key) {};
store.clearLocal = function() {};
store.getAllLocal = function() {};
store.eachLocal = function() {};
store.setSession = function(key, value) {};
store.getSession = function(key, defaultVal) {};
store.hasSession = function(key) { return store.getSession(key) !== undefined };
store.removeSession = function(key) {};
store.clearSession = function() {};
store.getAllSession = function() {};
store.eachSession = function() {};
store.serialize = function(value) {
return JSON.stringify(value)
};
store.deserialize = function(value) {
if (typeof value != 'string') { return undefined }
try { return JSON.parse(value) }
catch(e) { return value || undefined }
};
// 获取cookie
store.getCookie=function (name) {
$.cookie.json = true;
return $.cookie(name);
};
// 是否存在cookie
store.hasCookie=function (name) {
$.cookie.json = true;
if ($.cookie(name)){
return true
}else{
return false
}
};
// 设置cookie
store.setCookie = function (name, value, days, path) {
$.cookie.json = true;
if(days !==undefined && path!==undefined){
$.cookie(name, value,{expires:days,path:path});
}else if(days !==undefined && path===undefined){
$.cookie(name, value,{expires:days});
}else if(days ===undefined && path===undefined){
$.cookie(name, value);
}
};
// 获取所有cookie键值对
store.getAllCookie = function () {
return $.cookie();
};
// 删除cookie 必须传入与设置cookie时相同的参数,如 path, domain , secure
store.removeCookie =function (name,path) {
var result;
if(path){
result = $.removeCookie(name, { path: path });
}else {
result = $.removeCookie(name);
}
if(!result){console.log('删除cookie'+name+'失败')}
};
// Functions to encapsulate questionable FireFox 3.6.13 behavior
// when about.config::dom.storage.enabled === false
// See https://github.com/marcuswestin/store.js/issues#issue/13
function isLocalStorageNameSupported() {
try { return (localStorageName in win && win[localStorageName]) }
catch(err) { return false }
}
function isSessionStorageNameSupported() {
try { return (sessionStorageName in win && win[sessionStorageName]) }
catch(err) { return false }
}
// sessionStorage API
if(isSessionStorageNameSupported()){
_storage = win[sessionStorageName];
store.setSession = function(key, val) {
if (val === undefined) { return store.removeSession(key) }
_storage.setItem(key, store.serialize(val));
return val
};
store.getSession = function(key, defaultVal) {
var val = store.deserialize(_storage.getItem(key));
return (val === undefined ? defaultVal : val)
};
store.removeSession = function(key) { _storage.removeItem(key) };
store.clearSession = function() { _storage.clear() };
store.getAllSession = function() {
var ret = {};
store.eachSession(function(key, val) {
ret[key] = val
});
return ret
};
store.eachSession = function(callback) {
for (var i=0; i<_storage.length; i++) {
var key = _storage.key(i);
callback(key, store.getSession(key))
}
}
}
// localStorage API
if (isLocalStorageNameSupported()) {
storage = win[localStorageName];
store.setLocal = function(key, val) {
if (val === undefined) { return store.removeLocal(key) }
storage.setItem(key, store.serialize(val));
return val
};
store.getLocal = function(key, defaultVal) {
var val = store.deserialize(storage.getItem(key));
return (val === undefined ? defaultVal : val)
};
store.removeLocal = function(key) { storage.removeItem(key) };
store.clearLocal = function() { storage.clear() };
store.getAllLocal = function() {
var ret = {};
store.eachLocal(function(key, val) {
ret[key] = val
});
return ret
};
store.eachLocal = function(callback) {
for (var i=0; i<storage.length; i++) {
var key = storage.key(i);
callback(key, store.getLocal(key))
}
}
} else if (doc && doc.documentElement.addBehavior) {
var storageOwner,
storageContainer;
// Since #userData storage applies only to specific paths, we need to
// somehow link our data to a specific path. We choose /favicon.ico
// as a pretty safe option, since all browsers already make a request to
// this URL anyway and being a 404 will not hurt us here. We wrap an
// iframe pointing to the favicon in an ActiveXObject(htmlfile) object
// (see: http://msdn.microsoft.com/en-us/library/aa752574(v=VS.85).aspx)
// since the iframe access rules appear to allow direct access and
// manipulation of the document element, even for a 404 page. This
// document can be used instead of the current document (which would
// have been limited to the current path) to perform #userData storage.
try {
storageContainer = new ActiveXObject('htmlfile');
storageContainer.open();
storageContainer.write('<'+scriptTag+'>document.w=window</'+scriptTag+'><iframe src="/favicon.ico"></iframe>');
storageContainer.close();
storageOwner = storageContainer.w.frames[0].document;
storage = storageOwner.createElement('div')
} catch(e) {
// somehow ActiveXObject instantiation failed (perhaps some special
// security settings or otherwse), fall back to per-path storage
storage = doc.createElement('div');
storageOwner = doc.body
}
var withIEStorage = function(storeFunction) {
return function() {
var args = Array.prototype.slice.call(arguments, 0);
args.unshift(storage);
// See http://msdn.microsoft.com/en-us/library/ms531081(v=VS.85).aspx
// and http://msdn.microsoft.com/en-us/library/ms531424(v=VS.85).aspx
storageOwner.appendChild(storage);
storage.addBehavior('#default#userData');
storage.load(localStorageName);
var result = storeFunction.apply(store, args);
storageOwner.removeChild(storage);
return result
}
};
// In IE7, keys cannot start with a digit or contain certain chars.
// See https://github.com/marcuswestin/store.js/issues/40
// See https://github.com/marcuswestin/store.js/issues/83
var forbiddenCharsRegex = new RegExp("[!\"#$%&'()*+,/\\\\:;<=>?@[\\]^`{|}~]", "g");
var ieKeyFix = function(key) {
return key.replace(/^d/, '___$&').replace(forbiddenCharsRegex, '___')
};
store.setLocal = withIEStorage(function(storage, key, val) {
key = ieKeyFix(key);
if (val === undefined) { return store.remove(key) }
storage.setAttribute(key, store.serialize(val));
storage.save(localStorageName);
return val
});
store.getLocal = withIEStorage(function(storage, key, defaultVal) {
key = ieKeyFix(key);
var val = store.deserialize(storage.getAttribute(key));
return (val === undefined ? defaultVal : val)
});
store.removeLocal = withIEStorage(function(storage, key) {
key = ieKeyFix(key);
storage.removeAttribute(key);
storage.save(localStorageName)
});
store.clearLocal = withIEStorage(function(storage) {
var attributes = storage.XMLDocument.documentElement.attributes;
storage.load(localStorageName);
for (var i=attributes.length-1; i>=0; i--) {
storage.removeAttribute(attributes[i].name)
}
storage.save(localStorageName)
});
store.getAllLocal = function(storage) {
var ret = {};
store.eachLocal(function(key, val) {
ret[key] = val
});
return ret
};
store.eachLocal = withIEStorage(function(storage, callback) {
var attributes = storage.XMLDocument.documentElement.attributes;
for (var i=0, attr; attr=attributes[i]; ++i) {
callback(attr.name, store.deserialize(storage.getAttribute(attr.name)))
}
})
}
try {
var testKey = '__storejs__';
store.set(testKey, testKey);
if (store.get(testKey) != testKey) { store.disabled = true }
store.remove(testKey)
} catch(e) {
store.disabled = true
}
store.enabled = !store.disabled;
return store
}));