js缓存三种⽅法
1.使⽤sessionStorage、localStorage存储数组与对象js获取json的key和value
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"
使⽤⽅法来读取数据
有时候,我们需要将数据存储到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= Item(“name”);
//这三种获取值⽅式是⼀样的;
localStorage清除特定值⽅法
//清除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.Item(“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.Time() + Days * 24 * 60 * 60 * 1000);
if (key == null || key == "") {
}
else {
var nameValue = GetCookie(name);
if (nameValue == "") {
}
else {
var keyValue = getCookie(name, key);
if (keyValue != "") {
nameValue = place(key + "=" + keyValue, key + "=" + encodeURI(value));
}
else {
}
}
}
function GetCookie(name) {
var nameValue = "";
var key = "";
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = kie.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;
}
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论