localStorage、cookie的使用总结
来源:互联网 发布:java文件上传下载原理 编辑:程序博客网 时间:2024/05/21 03:26
1、localStorage是H5的新特性,主要用来本地存储,一般浏览器支持的大小是5M,不同浏览器会有所不同,解决了cookie存储空间不足的问题。
2、使用:⑴、存
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
var storage = window.localStorage;
// 方法1
storage["a"] = 1;
// 方法2
storage.b = 1;
// 方法3 推荐
storage.setItem("c", 3);
console.log(typeof storage["c"]); // string int类型打印出来是string,localstorage只支持string类型的存储
}
⑵、取
⑶、修改
⑵、取
if(!window.localStorage){
alert("浏览器不支持localstorage")
}else{
var storage=window.localStorage;
// 方法1
var a=storage.a;
// 方法2
var b=storage["b"]
// 方法3 推荐
var c = storage.getItem("c");
}
⑶、修改
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
storage.b=1;
storage.b=4; // 直接修改
console.log(storage.b);
}
⑷、删除
⑷、删除
// 移除所有
localStorage.clear();
// 删除某个键值对
localStorage.removeItem("a");
⑸、key()方法
⑸、key()方法
for(i=0;i<storage.length;i++){
var key =storage.key(i);
console.log(key) // 获取对应的键
}
⑹、存入为JSON形式时,先转为json字符串
⑹、存入为JSON形式时,先转为json字符串
function setStorage () {
var str_username = $("#loginname").val();
var str_password = $("#password").val();
var storage=window.localStorage;
var data = {
username: str_username,
password: str_password
}
var d = JSON.stringify(data)
storage.setItem("data",d);
}
⑺、读取后用转为JSON对象
⑺、读取后用转为JSON对象
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj); // 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
$.cookie('username', 'xy');
cookie有效期默认到用户关闭浏览器
3、设置有效时间
$.cookie('username', 'xy', { expires: 7 });
4、设置有效路径
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });// 如果在整个网站中访问这个cookie需要这样设置有效路径:path: '/'
5、读取cookie
$.cookie('username')
注:cookie是基于域名来储存的。意思您要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。
6、删除cookie
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
$.cookie('username', 'xy');
cookie有效期默认到用户关闭浏览器
3、设置有效时间
$.cookie('username', 'xy', { expires: 7 });
4、设置有效路径
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });// 如果在整个网站中访问这个cookie需要这样设置有效路径:path: '/'
5、读取cookie
$.cookie('username')
注:cookie是基于域名来储存的。意思您要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。
6、删除cookie
$.cookie('username', null); //通过传递null作为cookie的值即可
7、可选参数
$.cookie('the_cookie','the_value',{
expires:7, //(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;
path:'/', // (String)创建该Cookie的页面路径;
domain:'jquery.com', // (String)创建该Cookie的页面域名;
secure:true // (Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;
})
更多资料,进群领取
更多资料,进群领取
WEB前端学习交流群21 598399936
阅读全文
0 0
- localStorage、cookie的使用总结
- localStorage的使用总结
- localStorage的使用总结
- cookie,session,localStorage等总结之localStorage
- cookie、 sessionStorage 、localStorage之间的区别和使用
- localstorage, cookie, session一次具体业务的使用
- cookie、 sessionStorage 、localStorage之间的区别和使用
- cookie、 sessionStorage 、localStorage之间的区别和使用
- cookie、 sessionStorage 、localStorage之间的区别和使用
- cookie、 sessionStorage 、localStorage之间的区别和使用
- cookie、 sessionStorage 、localStorage之间的区别和使用
- cookie、 sessionStorage 、localStorage之间的区别和使用
- cookie、 sessionStorage 、localStorage之间的区别和使用
- cookie、 sessionStorage 、localStorage之间的区别和使用
- localStorage的使用总结及简单案例
- localstorage sessionstorage cookie的区别
- cookie、sessionStorage、localStorage的区别
- cookie和localStorage的区别
- Android 常用工具类
- java中的synchronized
- (一)算法--查找算法顺序查找和二分查找(递归和非递归方式)
- 编程规范
- 利用java8 stream api 实现List集合分页获取工具
- localStorage、cookie的使用总结
- TensorFlow学习记录1-一些比较好的学习资源
- Java编程题1
- 软考总结
- A Multiplication Game 博弈
- CodeForces
- Eclipse中配置Maven环境
- 书架装载机,为什么程序员就能如此轻松的写出来呢?
- 爬楼梯问题