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; } }