JS的數據儲存格式 · PHP筆記

javaScript有三種數據存儲方式，分別是： sessionStorage [localStorage](https://so.csdn.net/so/search?q=localStorage&spm=1001.2101.3001.7020) cookier 相同點：都保存在瀏覽器端，同源的不同點： ①傳遞方式不同 cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。 ②數據大小不同 cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。 ③數據有效期不同 sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持； localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據； cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。 ④作用域不同 sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面； localStorage 在所有同源窗口中都是共享的； cookie也是在所有同源窗口中都是共享的。 Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。 Web Storage 的 api 接口使用更方便。javaScript有三種數據存儲方式，分別是： sessionStorage localStorage cookier 相同點：都保存在瀏覽器端，同源的不同點： ①傳遞方式不同 cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。 ②數據大小不同 cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。 ③數據有效期不同 sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持； localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據； cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。 ④作用域不同 sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面； localStorage 在所有同源窗口中都是共享的； cookie也是在所有同源窗口中都是共享的。 ? Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。 Web Storage 的 api 接口使用更方便。 2.使用sessionStorage、localStorage localStorage：是一種你不主動清除它，它會一直將存儲數據存儲在客戶端的存儲方式，即使你關閉了客戶端（瀏覽器)，屬于本地持久層儲存 sessionStorage：用于本地存儲一個會話（[session](https://so.csdn.net/so/search?q=session&spm=1001.2101.3001.7020)）中的數據，一旦會話關閉，那么數據會消失，比如刷新。有時候，我們需要將數據存儲到sessionStorage和localStorage中，這樣做的好處有： 1 緩存數據 2 減少對內存的占用但是，storage只能存儲字符串的數據，對于JS中常用的數組或對象卻不能直接存儲。它能保存更大的數據（IE8上是10MB，Chrome是5MB），同時保存的數據不會再發送給服務器，避免帶寬浪費。 ? localStorage存儲方法（sessionStorage類似） ~~~ localStorage.name =’vanida； localStorage[“name”]=’vanida’； localStorage.setItem(“name”,”vanida”); //這三種設置值方式是一樣的； localStorage獲取值方法 var name = localStorage[“name”] var name= localStorage.name var name＝ localStorage.getItem(“name”); //這三種獲取值方式是一樣的； localStorage清除特定值方法 //清除name的值 localStorage.removeItem(“name”); localStorage.name＝”; localStorage清除所有值方法 localStorage.clear() localStorage只能存儲字符串，如果需要存儲對象，首先要轉化為字符串。利用JSON.stringify()； var person = {name:”vanida”,”sex”:”girl”,”age”:25}; localStorage.setItem(“person”,JSON.stringify(person)); // localStorage.person=”{“name”:”vanida”,”sex”:”girl”,”age”:25}” ~~~ 注意：JSON.stringify()中不要忘了“i”,stringify而不是stringfy！然后取出person的對象你可以用JSON.parse(); person = JSON.parse(localStorage.getItem(“person”)); 1.使用sessionStorage、localStorage存儲數組與對象 localStorage對象是HTML5的客戶端存儲持久化數據的方案。為了能訪問到同一個localStorage對象，頁面必須來自同一個域名（子域名無效），使用同一種協議，在同一個端口上。過期策略：localstorage永久存儲，不過期，除非手動刪除，sessionstorage在重啟瀏覽器、關閉頁面或新開頁面時失效。 localStorage是Storage類型的實例。有以下的幾種方法： ①clear（）：刪除所有值。 ②getItem（name）：根據指定的名字name獲取對應的值 ③key(index)：在指定的數字位置獲取該位置的名字。 ④removeItem（name）：刪除由name指定的名值對 ⑤setItem(name,value)：為指定名字設置一個對應的值 localStorage對象可以通過點號調用這些方法。例：使用方法來存儲數據 localStorage.setItem(“name”,“songyuhua”);//這樣就用localStorage存儲了一個名字為name的數據，數據的內容為 “songyuhua" 使用方法來讀取數據 localStorage.getItem(“name”);//這樣就讀取了名字為“name”的數據的值。有時候，我們需要將數據存儲到sessionStorage和localStorage中，這樣做的好處有： 1 緩存數據 2 減少對內存的占用但是，storage只能存儲字符串的數據，對于JS中常用的數組或對象卻不能直接存儲。它能保存更大的數據（IE8上是10MB，Chrome是5MB），同時保存的數據不會再發送給服務器，避免帶寬浪費。單個存儲 localStorage存儲方法（sessionStorage類似） localStorage.name =’vanida； localStorage[“name”]=’vanida’； localStorage.setItem(“name”,”vanida”); //這三種設置值方式是一樣的； localStorage獲取值方法 var name = localStorage[“name”] var name= localStorage.name var name＝ localStorage.getItem(“name”); //這三種獲取值方式是一樣的； localStorage清除特定值方法 //清除name的值 localStorage.removeItem(“name”); localStorage.name＝”; localStorage清除所有值方法 localStorage.clear() localStorage只能存儲字符串，如果需要存儲對象，首先要轉化為字符串。利用JSON.stringify()；多個存儲可以通過JSON對象提供的parse和stringify將其他數據類型轉化成字符串，再存儲到storage中就可以了。請看下面的代碼。 var obj = { name:'Jim' }; var str = JSON.stringify(obj); //存入 sessionStorage.obj = str; //讀取 str = sessionStorage.obj; //重新轉換為對象 obj = JSON.parse(str); localStorage也一樣，只是和sessionStorage的存儲時間不一樣。需要注意的是，JS中的數組本質上也是對象類型，所以上面的代碼對數組也是適用的。 var person = {name:”vanida”,”sex”:”girl”,”age”:25}; localStorage.setItem(“person”,JSON.stringify(person)); person = JSON.parse(localStorage.getItem(“person”)); // 注意：JSON.stringify()中不要忘了“i”,stringify而不是stringfy！ // 然后取出person的對象你可以用JSON.parse(); 2.Cookie 這個恐怕是最常見也是用得最多的技術了，也是比較古老的技術了。COOKIE優點很多，使用起來很方便但它的缺點也很多：比如跨域訪問問題；無法保存太大的數據（最大僅為4KB）；本地保存的數據會發送給服務器，浪費帶寬等等；代碼如下： function SetCookie(name, value) { var key = ''; var Days = 2; var exp = new Date(); var domain = ""; exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); if (key == null || key == "") { document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";"; } else { var nameValue = GetCookie(name); if (nameValue == "") { document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";"; } else { var keyValue = getCookie(name, key); if (keyValue != "") { nameValue = nameValue.replace(key + "=" + keyValue, key + "=" + encodeURI(value)); document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";"; } else { document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;" + domain + ";"; } } } } function GetCookie(name) { var nameValue = ""; var key = ""; var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) { nameValue = decodeURI(arr[2]); } if (key != null && key != "") { reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)"); if (arr = nameValue.match(reg)) { return decodeURI(arr[2]); } else return ""; } else { return nameValue; } }