【JS】JS 缓存数据的方法

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