HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服务器,仅仅是本地保存,有大小限制。
首先localStorage,localStorage拓展了cookie的4K限制,localStorage是持久化的本地保存,只要你找不到其所在地没有主动删掉,就会一直存在。就像一些缓存,都把APP删了还有。注意,在IE8以上的IE版本才支持localStorage这个属性,且不能被爬虫爬到
其次sessionStorage,sessionStorage是会话级别的本地保存,比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失,在不同浏览器窗口不会共享的,即使是同一个浏览器的同一个页面。根Java里面的会话有点类似的。
它们都有四个方法,setItem、getItem、removeItem、clear
window.localStorage.setItem(key,value);//设置指定key的数据(JSON格式) // 保存数据,以键值对的方式储存信息。 window.localStorage.getItem(key);//获取指定key的数据 // 获取数据,将键值传入,即可获取到对应的value值。 window.localStorage.removeItem(key);//删除指定key的数据 // 删除单个数据,根据键值移除对应的信息。 window.localStorage.clear();//清空所有的存储数据 // 删除所有的数据
使用localStorage的注意事项:
首先在使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性
if(!window.localStorage){ alert("浏览器支持localstorage"); return false; }else{ //主逻辑业务 }
另外,一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式,
所有的浏览器中都会把localStorage的值类型限定为string类型,只支持string类型的存储,
这个时候我们可以使用JSON.stringify()这个方法,来将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对象,使用JSON.parse()方法
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);
打印出来是Object对象,另外还有一点要注意的是,其他类型读取出来也要进行转换