5个HTML5的常用本地存储方式详解与介绍
在HTML5规范之前,存储主要是用cookies。但cookies也有缺点:
在请求头上带着数据;
大小是4k之内;
主Domain污染;
cookies的主要应用:购物车、客户登录。
由于存在这么多缺点,因此我们需要解决以下问题:
解决4k的大小问题;
解决请求头常带存储信息的问题;
解决关系型存储的问题;
跨浏览器;
HTML5的5种存储方式
1.本地存储localstorage
存储方式:
以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。
大小:每个域名5M。
支持情况:
注意:IE9localStorage不支持本地文件,需要将项目署到服务器,才可以支持!
检测方法:
if(window.localStorage){ alert('ThisbrowsersupportslocalStorage'); }else{ alert('ThisbrowserdoesNOTsupportlocalStorage'); }
常用API:
取记录:getItem;
设置记录:setIten;
移除记录:removeItem;
取key所对应的值:key;
清除记录:clear;
存储的内容:
数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)。
2.本地存储sessionstorage
HTML5的本地存储API中的localStorage与sessionStorage在使用方法上是相同的,区别在于sessionStorage在关闭页面后即被清空,而localStorage则会一直保存。
3.离线缓存applicationcache
本地缓存应用所需的文件。
使用方法:
需要配置manifest文件
...