JS的数据储存格式

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 接口使用更方便。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）中的数据，一旦会话关闭，那么数据会消失，比如刷新。

有时候，我们需要将数据存储到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”));

网上参考资料较多，不再一一备注来源，若有侵权，联系[e-mail]，我会尽快删除。

侵删 联系[e-mail]