{"id":9154,"date":"2017-02-28T22:40:48","date_gmt":"2017-02-28T14:40:48","guid":{"rendered":"http:\/\/bohu.net\/blog\/?p=9154"},"modified":"2023-02-10T23:18:19","modified_gmt":"2023-02-10T15:18:19","slug":"localstorage-%e6%9c%ac%e5%9c%b0%e5%ad%98%e5%82%a8","status":"publish","type":"post","link":"https:\/\/as32.net\/blog\/9154\/","title":{"rendered":"LocalStorage \u672c\u5730\u5b58\u50a8"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/bohu.net\/blog\/wp-content\/uploads\/2017\/02\/2011052411382518-1.jpg\" \/><\/p>\n<p><a href=\"http:\/\/bohu.net\/blog\/wp-content\/uploads\/2017\/02\/QQ%E5%9B%BE%E7%89%8720170228220902.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9796\" src=\"https:\/\/bohu.net\/blog\/wp-content\/uploads\/2017\/02\/QQ724720170228220902.png\" alt=\"\" width=\"195\" height=\"228\" \/><\/a><\/p>\n<p>Cookie\u4e0d\u591a\u8bf4\u4e86\u3002<\/p>\n<p>Web SQL Database\u5b9e\u9645\u4e0a\u5df2\u7ecf\u88ab\u5e9f\u5f03\uff0c\u800cHTML5\u7684\u652f\u6301\u7684\u672c\u5730\u5b58\u50a8\u5b9e\u9645\u4e0a\u53d8\u6210\u4e86<\/p>\n<p>Web Storage\uff08Local Storage\u548cSession Storage\uff09\u4e0eIndexedDB\u3002<\/p>\n<p>Web Storage\u4f7f\u7528\u7b80\u5355\u5b57\u7b26\u4e32\u952e\u503c\u5bf9\u5728\u672c\u5730\u5b58\u50a8\u6570\u636e\uff0c\u65b9\u4fbf\u7075\u6d3b\uff0c\u4f46\u662f\u5bf9\u4e8e\u5927\u91cf\u7ed3\u6784\u5316\u6570\u636e\u5b58\u50a8\u529b\u4e0d\u4ece\u5fc3\uff0cIndexedDB\u662f\u4e3a\u4e86\u80fd\u591f\u5728\u5ba2\u6237\u7aef\u5b58\u50a8\u5927\u91cf\u7684\u7ed3\u6784\u5316\u6570\u636e\uff0c\u5e76\u4e14\u4f7f\u7528\u7d22\u5f15\u9ad8\u6548\u68c0\u7d22\u7684API\u3002<\/p>\n<p>sessionStorage\u548c\u4e0a\u6587\u4e2d\u63d0\u5230\u7684localStorage\u975e\u5e38\u76f8\u8bc6\uff0c\u65b9\u6cd5\u4e5f\u51e0\u4e4e\u4e00\u6837\uff1a<\/p>\n<p>\u975e\u5e38\u901a\u4fd7\u6613\u61c2\u7684\u63a5\u53e3:<\/p>\n<ul>\n<li>sessionStorage.getItem(key):\u83b7\u53d6\u6307\u5b9akey\u672c\u5730\u5b58\u50a8\u7684\u503c<\/li>\n<li>sessionStorage.setItem(key,value)\uff1a\u5c06value\u5b58\u50a8\u5230key\u5b57\u6bb5<\/li>\n<li>sessionStorage.removeItem(key):\u5220\u9664\u6307\u5b9akey\u672c\u5730\u5b58\u50a8\u7684\u503c<\/li>\n<li>sessionStorage.length\u662fsessionStorage\u7684\u9879\u76ee\u6570<\/li>\n<\/ul>\n<h5><\/h5>\n<h4>sessionStorage\u4e0e localStorage \u7684\u5f02\u540c<\/h4>\n<p>sessionStorage \u548c localStorage \u5c31\u4e00\u4e2a\u4e0d\u540c\u7684\u5730\u65b9\uff0c sessionStorage\u6570\u636e\u7684\u5b58\u50a8\u4ec5\u7279\u5b9a\u4e8e\u67d0\u4e2a\u4f1a\u8bdd\u4e2d\uff0c\u4e5f\u5c31\u662f\u8bf4\u6570\u636e\u53ea\u4fdd\u6301\u5230\u6d4f\u89c8\u5668\u5173\u95ed\uff0c\u5f53\u6d4f\u89c8\u5668\u5173\u95ed\u540e\u91cd\u65b0\u6253\u5f00\u8fd9\u4e2a\u9875\u9762\u65f6\uff0c \u4e4b\u524d\u7684\u5b58\u50a8\u5df2\u7ecf\u88ab\u6e05\u9664\u3002\u800c localStorage \u662f\u4e00\u4e2a\u6301\u4e45\u5316\u7684\u5b58\u50a8\uff0c\u5b83\u5e76\u4e0d\u5c40\u9650\u4e8e\u4f1a\u8bdd\u3002<\/p>\n<p>\u4f7f\u7528 Web Storage\uff08Local Storage\u548cSession Storage\uff09<\/p>\n<p>\u9996\u5148\u81ea\u7136\u662f\u68c0\u6d4b\u6d4f\u89c8\u5668\u662f\u5426\u652f\u6301\u672c\u5730\u5b58\u50a8\u3002\u5728HTML5\u4e2d\uff0c\u672c\u5730\u5b58\u50a8\u662f\u4e00\u4e2awindow\u7684\u5c5e\u6027\uff0c\u5305\u62eclocalStorage\u548csessionStorage\uff0c\u4ece\u540d\u5b57\u5e94\u8be5\u53ef\u4ee5\u5f88\u6e05\u695a\u7684\u8fa8\u8ba4\u4e8c\u8005\u7684\u533a\u522b\uff0c\u524d\u8005\u662f\u4e00\u76f4\u5b58\u5728\u672c\u5730\u7684\uff0c\u540e\u8005\u53ea\u662f\u4f34\u968f\u7740session\uff0c\u7a97\u53e3\u4e00\u65e6\u5173\u95ed\u5c31\u6ca1\u4e86\u3002\u4e8c\u8005\u7528\u6cd5\u5b8c\u5168\u76f8\u540c\uff0c\u8fd9\u91cc\u4ee5localStorage\u4e3a\u4f8b\u3002<\/p>\n<p>if(window.localStorage){<br \/>\nalert(&#8216;This browser supports localStorage&#8217;);<br \/>\n}else{<br \/>\nalert(&#8216;This browser does NOT support localStorage&#8217;);<br \/>\n}<\/p>\n<p>\u5b58\u50a8\u6570\u636e\u7684\u65b9\u6cd5\u5c31\u662f\u76f4\u63a5\u7ed9window.localStorage\u6dfb\u52a0\u4e00\u4e2a\u5c5e\u6027\uff0c\u4f8b\u5982\uff1awindow.localStorage.a \u6216\u8005 window.localStorage[&#8220;a&#8221;]\u3002\u5b83\u7684\u8bfb\u53d6\u3001\u5199\u3001\u5220\u9664\u64cd\u4f5c\u65b9\u6cd5\u5f88\u7b80\u5355\uff0c\u662f\u4ee5\u952e\u503c\u5bf9\u7684\u65b9\u5f0f\u5b58\u5728\u7684\uff0c\u5982\u4e0b\uff1a<\/p>\n<p>localStorage.a = 3;\/\/\u8bbe\u7f6ea\u4e3a&#8221;3&#8243;<br \/>\nlocalStorage[&#8220;a&#8221;] = &#8220;sfsf&#8221;;\/\/\u8bbe\u7f6ea\u4e3a&#8221;sfsf&#8221;\uff0c\u8986\u76d6\u4e0a\u9762\u7684\u503c<br \/>\nlocalStorage.setItem(&#8220;b&#8221;,&#8221;isaac&#8221;);\/\/\u8bbe\u7f6eb\u4e3a&#8221;isaac&#8221;<br \/>\nvar a1 = localStorage[&#8220;a&#8221;];\/\/\u83b7\u53d6a\u7684\u503c<br \/>\nvar a2 = localStorage.a;\/\/\u83b7\u53d6a\u7684\u503c<br \/>\nvar b = localStorage.getItem(&#8220;b&#8221;);\/\/\u83b7\u53d6b\u7684\u503c<br \/>\nlocalStorage.removeItem(&#8220;c&#8221;);\/\/\u6e05\u9664c\u7684\u503c<\/p>\n<p>\u8fd9\u91cc\u6700\u63a8\u8350\u4f7f\u7528\u7684\u81ea\u7136\u662fgetItem()\u548csetItem()\uff0c\u6e05\u9664\u952e\u503c\u5bf9\u4f7f\u7528removeItem()\u3002\u5982\u679c\u5e0c\u671b\u4e00\u6b21\u6027\u6e05\u9664\u6240\u6709\u7684\u952e\u503c\u5bf9\uff0c\u53ef\u4ee5\u4f7f\u7528clear()\u3002\u53e6\u5916\uff0cHTML5\u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e2akey()\u65b9\u6cd5\uff0c\u53ef\u4ee5\u5728\u4e0d\u77e5\u9053\u6709\u54ea\u4e9b\u952e\u503c\u7684\u65f6\u5019\u4f7f\u7528\uff0c\u5982\u4e0b\uff1a<\/p>\n<p>var storage = window.localStorage;<br \/>\nfunction showStorage(){<br \/>\nfor(var i=0;i&lt;storage.length;i++){<br \/>\n\/\/key(i)\u83b7\u5f97\u76f8\u5e94\u7684\u952e\uff0c\u518d\u7528getItem()\u65b9\u6cd5\u83b7\u5f97\u5bf9\u5e94\u7684\u503c<br \/>\ndocument.write(storage.key(i)+ &#8221; : &#8221; + storage.getItem(storage.key(i)) + &#8220;&lt;br&gt;&#8221;);<br \/>\n}<br \/>\n}<\/p>\n<h3>html5\u5ba2\u6237\u7aef\u672c\u5730\u5b58\u50a8\u4e4bsessionStorage\u7684\u5b9e\u4f8b\u9875\u9762<\/h3>\n<p><a title=\"http:\/\/www.css88.com\/demo\/sessionStorage\/\" href=\"http:\/\/www.css88.com\/demo\/sessionStorage\/\">http:\/\/www.css88.com\/demo\/sessionStorage\/<\/a><\/p>\n<p><a title=\"http:\/\/www.css88.com\/demo\/sessionStorage\/index2.html\" href=\"http:\/\/www.css88.com\/demo\/sessionStorage\/index2.html\">http:\/\/www.css88.com\/demo\/sessionStorage\/index2.html<\/a><\/p>\n<p><a title=\"http:\/\/www.css88.com\/demo\/sessionStorage\/index3.html\" href=\"http:\/\/www.css88.com\/demo\/sessionStorage\/index3.html\">http:\/\/www.css88.com\/demo\/sessionStorage\/index3.html<\/a><\/p>\n<h3>Web Storage Support Test<\/h3>\n<p><a title=\"http:\/\/dev-test.nemikor.com\/web-storage\/support-test\/\" href=\"http:\/\/dev-test.nemikor.com\/web-storage\/support-test\/\">http:\/\/dev-test.nemikor.com\/web-storage\/support-test\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cookie\u4e0d\u591a\u8bf4\u4e86\u3002 Web SQL Database\u5b9e\u9645\u4e0a\u5df2\u7ecf\u88ab\u5e9f\u5f03\uff0c\u800cHTML5\u7684\u652f\u6301\u7684\u672c\u5730\u5b58\u50a8\u5b9e\u9645\u4e0a\u53d8 &hellip; <a href=\"https:\/\/as32.net\/blog\/9154\/\" class=\"more-link\">\u7ee7\u7eed\u9605\u8bfb<span class=\"screen-reader-text\">\u201cLocalStorage \u672c\u5730\u5b58\u50a8\u201d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,11,26,28],"tags":[199,236,340,410],"class_list":["post-9154","post","type-post","status-publish","format-standard","hentry","category-html","category-web","category-26","category-28","tag-indexeddb","tag-local-storage","tag-session-storage","tag-web-storage"],"_links":{"self":[{"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/posts\/9154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/comments?post=9154"}],"version-history":[{"count":2,"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/posts\/9154\/revisions"}],"predecessor-version":[{"id":9797,"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/posts\/9154\/revisions\/9797"}],"wp:attachment":[{"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/media?parent=9154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/categories?post=9154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/as32.net\/blog\/wp-json\/wp\/v2\/tags?post=9154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}