HTML5 localStorage
来源:互联网 发布:兼职在家做数据录入 编辑:程序博客网 时间:2024/04/30 12:25
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
这里我们以localStorage来分析
一、localStorages的三种赋值方式
if(!window.localStorage){
alert("浏览器支持localstorage");
return false; }else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
二、localStorage删除方式
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
storage.clear();
var storage=window.localStorage; storage.a=1; storage.setItem("c",3); console.log(storage); storage.clear(); console.log(storage);
console.log(storage);
三、将JSON转换为JSON字符串
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
将JSON字符串转换为json对象
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
- html5 localStorage
- html5 LocalStorage
- HTML5 localStorage
- HTML5 localStorage
- HTML5 localStorage
- HTML5:localStorage
- HTML5 localStorage
- HTML5中的localStorage
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 LocalStorage 本地存储
- HTML5 之 SessionStorage & LocalStorage
- tomcat启动birt项目报错出现 Servlet ViewerServlet is not available
- 架构设计:系统存储(19)——图片服务器:需求和技术选型(1)
- Selenium自动化测试实战项目(一)
- LeetCode 451. Sort Characters By Frequency
- 黑板课爬虫闯关第一关
- HTML5 localStorage
- 第十七课 弱引用table
- eclipse代码自动提示
- Android中的OutOfMemoryError
- Apache模块mod_rewrite
- iOS多线程之Pthread/NSthread
- nova 创建虚拟机
- 解决C#后台返回json数据双引号转义为"问题
- 找出数组中两个数之和为指定的数