返回

关于浏览器本地存储

HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。正让我们想起了之前的cookie,那么这个本地存储与cookie有什么区别那? 首先,存储空间大!不同浏览器的标准可能不一样,但一般都在5~10M,比cookie的4k强多了。此外,本地存储的数据不会被发到服务器,与cookie相比,节省带宽,加快响应速度。最后,localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。好像都是优点…

关于兼容性:连IE8都支持了,你还怕什么。

一、localStorage方法

其是只要在chrome的控制台里面打印一下localStorage,就出来了。 其中最常用的是以下几个: length:本地存储数据的个数 setItem(key,value):向key字段写入value数据 getItem(key):去key字段的数据 removeItem(key):移除key字段 clear():清空该域下的所有数据 key(i):获取第i个数据的key

二、如何使用HTML5 存储

从之前打印的方法我们也能看出,HTML5 存储是基于键值对的。键是一个字符串,数据可以是任何类型的JavaScript基本数据类型不过需要注意的是,这些数据在存储时实际上也是以字符串保存的。 因此在访问数据时你需要利用parseInt() 或 parseFloat()方法来做数据类型的转换。

我们可以像使用对象一样操作localStorage

var ls=localStorage;
ls['user']='John';
ls.setItem('work','codding');
console.log(ls.length); //2
delete ls['work'];
for(var i in ls){
  console.info(i + ' : ' + ls.getItem(i)); //user : John
  ls.removeItem(i);
}

当本地存储满了,再往里面写数据,将会触发error(这点和cookie的表现不一样),因此一个严谨的脚本应该捕捉写localStorage的错误

var FIVE_MB=Array(5*1024*512).join('囧');
try{
  localStorage.setItem('x',FIVE_MB);
}catch(e){
  console.info('囧');
}

三、存储JSON数据

JSON数据存储在本地,需调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式。

var json_data = {id:1,name:"1",email:"1"}; 
storage.setItem("json_data",JSON.stringify(json_data));  //写入
var json_data = JSON.parse(storage.getItem("json_data"));  //读取 

四、一些缺点

1.WebStorage API属于一种同步API,所以在保存大数据量或保存对象时的性能不高。 2.缺乏索引,所以在针对大数据量或对象进行搜索时的性能不高。 3.目前主流浏览器均只支持在WebStorage中存储字符串数据,所以当保存对象时必须先将其转换为JSON字符串后进行保存,当获取对象时必须先将取出的字符串后将其还原为对象,所以导致针对对象进行存取操作时的性能不高。

❤️
Built with Hugo
Theme Stack designed by Jimmy