前端开发中cookie、localStorage使用总结

前端开发中怎么处理缓存?|前端开发 浏览器缓存|网站前端开发

1、localStorage是H5的新特性,主要用来本地存储,一般浏览器支持的大小是5M,不同浏览器会有所不同,解决了cookie存储空间不足的问题。
2、使用:
⑴、存
javascript 代码

if (!window.localStorage) {
alert(“浏览器不支持localstorage”);
returnfalse;
} else {
varstorage= window.localStorage;
// 方法1
storage[“a”] =1;
// 方法2
storage.b=1;
// 方法3 推荐
storage.setItem(“c”,3);
console.log(typeofstorage[“c”]);// string int类型打印出来是string,localstorage只支持string类型的存储
}

⑵、取
javascript 代码

if (!window.localStorage) {
alert(“浏览器不支持localstorage”)
} else {
varstorage= window.localStorage;
// 方法1
vara=storage.a;
// 方法2
varb=storage[“b”]
// 方法3 推荐
varc=storage.getItem(“c”);
}

⑶、修改
javascript 代码

if (!window.localStorage) {
alert(“浏览器支持localstorage”);
} else {
varstorage= window.localStorage;
storage.b=1;
storage.b=4;// 直接修改
console.log(storage.b);
}

⑷、删除
javascript 代码

// 移除所有
localStorage.clear();
// 删除某个键值对
localStorage.removeItem(“a”);

⑸、key()方法
javascript 代码

for (i = 0; i < storage.length; i++) {
varkey=storage.key(i);
console.log(key) // 获取对应的键
}

⑹、存入为JSON形式时,先转为json字符串
javascript 代码

function setStorage() {
varstr_username=$(“#loginname”).val();
varstr_password=$(“#password”).val();
varstorage= window.localStorage;
vardata={
username: str_username,
password: str_password
}
vard=JSON.stringify(data)
storage.setItem(“data”,d);
}

⑺、读取后用转为JSON对象
javascript 代码

//将JSON字符串转换成为JSON对象输出
varjson=storage.getItem(“data”);
varjsonObj=JSON.parse(json);
console.log(typeofjsonObj);// Object

3、局限:
①、IE8以上才支持
②、浏览器会把localstorage的值类型限定为string类型,JSON对象需要转换。
③、本质上是存取字符串,存储内容太多消耗空间,页面变卡。
④、localStorage在浏览器的隐私模式下不可读取
⑤、不能被爬虫抓取

Cookie

让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术。
使用jquery.cookie.js
1、引入jquery.cookie.js
<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.cookie.js”></script>

2、设置 “会话”cookie
javascript 代码

$.cookie(‘username’, ‘xy’);

 cookie有效期默认到用户关闭浏览器

3、设置有效时间
javascript 代码

$.cookie(‘username’, ‘xy’, { expires: 7 });

4、设置有效路径
javascript 代码

$.cookie(‘the_cookie’, ‘the_value’, {
expires: 7,
path: ‘/’
}); // 如果在整个网站中访问这个cookie需要这样设置有效路径:path: ‘/’

5、读取cookie
javascript 代码

$.cookie(‘username’)

注:cookie是基于域名来储存的。意思您要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。

6、删除cookie
javascript 代码

$.cookie(‘username’, null); //通过传递null作为cookie的值即可

7、可选参数
javascript 代码

$.cookie(‘the_cookie’, ‘the_value’, {
expires: 7, //(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;
path: ‘/’, // (String)创建该Cookie的页面路径;
domain: ‘jquery.com’, // (String)创建该Cookie的页面域名;
secure: true // (Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;
})
前端开发怎么做缓存?|前端开发浏览器缓存|前端开发 h5界面缓存
» 本文来自:前端开发者 » 《前端开发中cookie、localStorage使用总结》
» 本文链接地址:https://www.rokub.com/3626.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!