背景html
回顧一年前的代碼,關於cookies這塊,增刪改查徹底能夠封裝成一個模塊。在MDN上看到一款很全的分享,在此作個記錄。git
cookies模塊github
/*\ |*| |*| :: cookies.js :: |*| |*| A complete cookies reader/writer framework with full unicode support. |*| |*| Revision #5 - August 14th, 2018 |*| |*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie |*| https://developer.mozilla.org/User:fusionchess |*| https://github.com/madmurphy/cookies.js |*| |*| This framework is released under the GNU Public License, version 3 or later. |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| |*| Syntaxes: |*| |*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]) |*| * docCookies.getItem(name) |*| * docCookies.removeItem(name[, path[, domain]]) |*| * docCookies.hasItem(name) |*| * docCookies.keys() |*| * docCookies.clear([path[, domain]]) |*| \*/ var docCookies = { getItem: function (sKey) { if (!sKey) { return null; } return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; }, setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } var sExpires = ""; if (vEnd) { switch (vEnd.constructor) { case Number: sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; /* Note: Despite officially defined in RFC 6265, the use of `max-age` is not compatible with any version of Internet Explorer, Edge and some mobile browsers. Therefore passing a number to the end parameter might not work as expected. A possible solution might be to convert the the relative time to an absolute time. For instance, replacing the previous line with: */ /* sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; expires=" + (new Date(vEnd * 1e3 + Date.now())).toUTCString(); */ break; case String: sExpires = "; expires=" + vEnd; break; case Date: sExpires = "; expires=" + vEnd.toUTCString(); break; } } document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); return true; }, removeItem: function (sKey, sPath, sDomain) { if (!this.hasItem(sKey)) { return false; } document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : ""); return true; }, hasItem: function (sKey) { if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }, keys: function () { var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } return aKeys; }, clear: function (sPath, sDomain) { var aKeys = this.keys(); for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { this.removeItem(aKeys[nIdx], sPath, sDomain); } } }; if (typeof module !== "undefined" && typeof module.exports !== "undefined") { module.exports = docCookies; }
cookies示例瀏覽器
docCookies.setItem("test0", "Hello world!"); docCookies.setItem("test1", "Unicode test: \u00E0\u00E8\u00EC\u00F2\u00F9", Infinity); docCookies.setItem("test2", "Hello world!", new Date(2020, 5, 12)); docCookies.setItem("test3", "Hello world!", new Date(2027, 2, 3), "/blog"); docCookies.setItem("test4", "Hello world!", "Sun, 06 Nov 2022 21:43:15 GMT"); docCookies.setItem("test5", "Hello world!", "Tue, 06 Dec 2022 13:11:07 GMT", "/home"); docCookies.setItem("test6", "Hello world!", 150); docCookies.setItem("test7", "Hello world!", 245, "/content"); docCookies.setItem("test8", "Hello world!", null, null, "example.com"); docCookies.setItem("test9", "Hello world!", null, null, null, true); docCookies.setItem("test1;=", "Safe character test;=", Infinity); alert(docCookies.keys().join("\n")); alert(docCookies.getItem("test1")); alert(docCookies.getItem("test5")); docCookies.removeItem("test1"); docCookies.removeItem("test5", "/home"); alert(docCookies.getItem("test1")); alert(docCookies.getItem("test5")); alert(docCookies.getItem("unexistingCookie")); alert(docCookies.getItem()); alert(docCookies.getItem("test1;="));
總結緩存
cookie只是瀏覽器緩存機制中的一種,因爲篇幅有限,會在下一篇文章介紹幾種瀏覽器經常使用的緩存技術。cookie
cookie.js 做者 github持續更新連接:github傳送門dom