详解H5本地储存Web Storage
一、本地存储由来的背景
由于html4时代cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于cookie。但是cookie的这些限制,也就导致了cookie只能存储一些id之类的标识符等简单的数据。
下面是cookie的限制:
大多数浏览器支持最大为 4096 字节的 cookie。
浏览器还限制站点可以在用户计算机上存储的 cookie 的数量。大多数浏览器只允许每个站点存储 20 个cookie;如果试图存储更多 cookie,则最旧的 cookie 便会被丢弃。
有些浏览器还会对它们将接受的来自所有站点的 cookie 总数作出绝对限制,通常为 300 个。
cookie默认情况都会随着http请求发送到后台服务器,但并不是所有请求都需要cookie的,比如:js、css、图片等请求则不需要cookie。
为了破解cookie的一系列限制,html5通过js的新的api就能直接存储大量的数据到客户端浏览器,而且支持复杂的本地数据库,让js更有效率。 html5支持两种的webstorage:
- 永久性的本地存储(localstorage)
- 会话级别的本地存储(sessionstorage)
二、本地存储的分类
h5本地存储有两个api,一个是web storage,还有一个是web sql。不管是哪一个,都是基于javascript语言来使用,接下来我就教你怎么使用web storage
三、web storage
html5 定义了本地存储规范 web storage , 提供了两种存储类型 api: sessionstorage 和 localstorage,二者的差异主要是数据的保存时长及数据的共享方式。
1.localstorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;localstorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
特点:① 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localstorage数据且数据除了删除否则永久保存,但客户端或浏览器之间的数据相互独立。
② 数据不会随着http请求发送到后台服务器;
③ 存储数据的大小机会不用考虑,因为在html5的标准中要求浏览器至少要支持到4mb。
看一个例子:
代码如下:
function clickcounter(){ if(typeof(storage)!=="undefined"){ if(localstorage.clickcount){ localstorage.clickcount=number(localstorage.clickcount)+1; }else{ localstorage.clickcount=1; } document.getelementbyid("result").innerhtml=" 你已经点击了按钮 " + localstorage.clickcount + " 次 "; }else{ document.getelementbyid("result").innerhtml="对不起,您的浏览器不支持 web 存储。"; } } </script> <p><button onclick="clickcounter()" type="button">点我!</button></p> <div id="result"></div> <p>点击该按钮查看计数器的增加。</p> <p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
2.sessionstorage在会话期内有效,数据在浏览器关闭后自动删除;
特点:会话控制、短期保存。会话概念与服务器端的session概念相似,短期保存指窗口或浏览器或客户端关闭后自动消除数据。
兼容性
注意:ie9 localstorage不支持本地文件,需要将项目署到服务器,才可以支持!
目前所有主流的浏览器都在一定程度上支持 html5 的 web storage特性。 由上图可以看出,基本上所有现代浏览器都已经支持 web storage。
android平台和 ios 平台各自的浏览器都基本上支持 web storage 本地存储特性。 目前市场上的移动设备, 除了 android 手机和 iphone 手机外,越来越多的平板电脑面世,而且基本上依赖着两种平台。在移动端使用 web storage 我们几乎不需要考虑浏览器是否支持, 当然从代码的严谨来说,建议最好在使用前先检查浏览器是否支持
下面是检测方式:
if (window.localstorage) { // 浏览器支持 localstorage }else{ // 不支持 } if (window.sessionstorage) { // 浏览器支持 sessionstorage }else{ // 不支持 }
三、localstorage
html5 的本地存储 api 中的 localstorage 与 sessionstorage 在使用方法上是相同的,区别在于 sessionstorage 在关闭页面后即被清空,而 localstorage 则会一直保存。我们这里以 localstorage 为例,简要介绍下 html5 的本地存储,并针对如遍历等常见问题作一些示例说明。 localstorage 是 html5 本地存储的 api,使用键值对的方式进行存取数据,存取的数据只能是字符串。不同浏览器对该 api 支持情况有所差异,如使用方法、最大存储空间等。
存储方式:以键值对(key-value)的方式存储字符串。
主要应用:购物车、客户登录、游戏存档。。。
可储存的数据类型:数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)
储存地址:c:\users\15014\appdata\local\google\chrome\user data\default\local storage(不同电脑不一样,需要打开隐藏文件显示,但是在c盘搜索localstorage就能搜出这个文件夹。)
localstorage提供了四个方法来辅助我们进行对本地存储做相关操作。
(1)localstorage.setitem(键名,键值)在本地客户端存储一个字符串类型的数据,其中,第一个参数“键名”代表了该数据的标识符,而第二个参数“键值”为该数据本身。如:
localstorage.setitem("name", "张三"); //存储键名为name和键值为"张三"的数据到本地 localstorage.setitem("age", "28"); //存储键名为age和键值为"28"的数据到本地
(2)localstorage.getitem(键名) 读取已存储在本地的数据,通过键名作为参数读取出对应键名的数据。如:
var data = localstorage.getitem("name"); alert(data);//张三
(3)localstorage.removeitem(键名)移除已存储在本地的数据,通过键名作为参数删除对应键名的数据。如:
var data2 = localstorage.removeitem("name");//从本地存储中移除键名为name的数据 alert(data2); //undefined
(4)localstorage.clear() 移除本地存储所有数据。如:
localstorage.clear() 移除本地存储所有数据。如: localstorage.clear(); //保存着的"age/28"和"name/张三"的键/值对也被移除了,所有本地数据拜拜
(5)另外,sessionstorage中的四个函数与以上localstorage类的函数用法基本一致,就不再详解。
下面是一个小实例:
<script type="text/javascript"> localstorage.setitem("name", "张三"); localstorage.setitem("age", "28"); verify(); //验证本地存储 localstorage.removeitem("name"); verify(); //验证name是否存在 localstorage.clear(); verify(); //验证name和age是否存在 //自定义验证函数,验证name和age的数据是否存在 function verify(){ var type = localstorage.getitem("name"); var price = localstorage.getitem("age"); type = type ? type : '不存在'; price = price ? price : '不存在'; alert( "name: " + type + "\n\n" + "age: " + price ); } </script>
三、localstorage过期策略
由于html5没有给本地存储设置过期策略,那么在处理数据的过期策略的时候可以编写自己过期策略程序,如下:
<!doctype> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="access-control-allow-origin" content="anonymous"> <title>locstorage 过期策略</title> </head> <body> </body> </html> <script> function set(key,value){ var curtime = new date().gettime();//获取当前时间 localstorage.setitem(key,json.stringify({val:value,time:curtime}));//转换成json字符串序列 /* 说明: json.parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":"23"}' 结果: json.parse(str) object age: "23" name: "huangxiaojian" __proto__: object 注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。 json.stringify()用于从一个对象解析出字符串,如 var a = {a:1,b:2} 结果: json.stringify(a) "{"a":1,"b":2}" */ } function get(key,exp)//exp是设置的过期时间 { var val = localstorage.getitem(key);//获取存储的元素 var dataobj = json.parse(val);//解析出json对象 if(new date().gettime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间 { console.log("expires");//提示过期 } else{ console.log("val="+dataobj.val); } } </script>
使用操作如下图所示:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。