h5制作怎么保存在本地,h5的存储方式
一、本地存储由来的背景
由于HTML4时代cookie的大小、格式和存储数据格式的限制，网站应用要想在浏览器中存储用户的一些信息，只能使用cookie。然而，由于cookie的这些限制，cookie只能存储一些简单的数据，如ID等标识符。
以下是Cookie的限制：
大多数浏览器支持最大4096字节的Cookie。
浏览器还限制了网站可以在用户计算机上存储的Cookie的数量。大多数浏览器只允许每个网站存储20个Cookie；如果您尝试存储更多的cookie，最旧的cookie将被丢弃。
有些浏览器还对从所有网站接受的Cookie总数有绝对限制，通常是300个。
默认情况下，cookie会随Http请求一起发送到后台服务器，但并非所有请求都需要cookie。比如js、css、图片等请求都不需要cookies。
为了破解Cookie的一系列限制，HTML5可以通过JS的新API直接将大量数据存储到客户端浏览器，并且它支持复杂的本地数据库，使得JS更加高效。HTML5支持两种web存储：
永久本地存储会话级本地存储二、本地存储的分类
H5本地存储有两个API，一个是Web存储，另一个是Web SQL。无论哪一种都是基于JavaScript语言，然后我会教你如何使用Web存储。
三、Web Storage
HTML5定义了Web存储，一个localStorage规范，并提供了两种存储类型API: sessionStorage和Local Storage。两者的区别主要是数据的存储时间和数据共享的方式。
1.localStorage 始终存储在本地，除非用户或程序删除，否则数据存储是永久的；localStorage对象存储的数据没有时间限制。在第二天、第一周或第二年之后，这些数据仍然可用。
特点：域内安全永久存储。即客户端或浏览器中来自同一域名的所有页面都可以访问localStorage数据，除非删除，否则数据将永久保存，但客户端或浏览器之间的数据是相互独立的。
数据不会以Http请求发送到后台服务器；
不需要考虑存储数据的大小，因为HTML5的标准要求浏览器至少支持4MB。
看一个例子：
代码如下：
函数click counter(){ if(type of(Storage)！== undefined ){ if(local storage . click count){ local storage . click count=Number(local storage . click count)1；} else { local storage . click count=1；} document . getelementbyid( result )。innerHTML=您已单击按钮 localStorage.clickcount 次；} else { document . getelementbyid( result )。innerHTML=抱歉，您的浏览器不支持web存储。；} }/scriptpbuttonclick= click counter() type= button 单击我！/button/p div id=result/div p点击此按钮可以看到计数器的增加。/p p p关闭浏览器选项卡(或窗口)并重新打开此页面，计数器将继续计数(不会重置)。/p2.sessionStorage会话期间有效，关闭浏览器后自动删除数据；
功能：会话控制和短期存储。会话的概念类似于服务器端会话的概念。短期保存是指关闭窗口或浏览器或客户端后自动清除数据。
和睦相处
注意：IE9 localStorage不支持本地文件。你需要把项目发送到服务器才能支持！
目前所有主流浏览器都在一定程度上支持HTML5的Web存储特性。从上图可以看出，基本上所有的现代浏览器都已经支持Web存储了。
Android平台和IOS平台的浏览器基本都支持Web Storage本地存储特性。目前市面上的移动设备，除了安卓手机和iphone，越来越多的平板电脑都有，基本都是依托两个平台。在移动端使用Web存储时，我们几乎不需要考虑浏览器是否支持。当然，从代码的严格程度来看，建议在使用之前先检查浏览器是否支持。
以下是检测方法：
If (window.localStorage) {//浏览器支持local storage } else {//Not } if(window . session storage){//浏览器支持session storage } else {//Not }三、localStorage
HTML5的localStorage API中localStorage的用法与sessionStorage相同。不同之处在于，sessionStorage在关闭页面后被清除，而本地存储将始终被保存。这里以localStorage为例，简单介绍一下html5的本地存储，并针对遍历等常见问题举例说明。LocalStorage是Html5本地存储的API，使用键值对访问数据，访问的数据只能是字符串。不同的浏览器对这个API的支持是不一样的，比如用法，最大存储空间等。
存储方式：将字符串存储为键值对。
主要应用：购物车，客户登录，游戏存档。
可储存的数据类型：数组，图片，json，样式，脚本。(任何可以序列化为字符串的内容都可以存储)
储存地址：c:\ users \ 15014 \ appdata \ local \ Google \ chrome \ user data \ default \ local storage(不同的电脑不一样，需要打开隐藏文件显示，但是可以通过搜索c盘本地存储找到这个文件夹)
LocalStorage提供了四种方法来辅助我们操作本地存储。
(1)localStorage.setItem (key name，key value)在本地客户端存储字符串类型的数据，其中第一个参数“key name”代表数据的标识符，第二个参数“key value”是数据本身。比如：
LocalStorage.setItem(name ，张三)；//将键名name、键值张三的数据存储到本地localStorage.setItem(age ， 28 )；//将键名age、键值 28 的数据存储到本地(2)localStorage.getItem(键名)读取本地存储的数据，以键名为参数读出键名对应的数据。比如：
var data=local storage . getitem( name )；警报(数据)；//张三(3)localStorage.removeItem(键名)删除本地存储的数据，以键名为参数删除键名对应的数据。比如：
var data 2=local storage . remove item( name )；//从本地存储中删除关键字名称为的数据警报(data2 );//undefined(4)local storage . clear()删除本地存储的所有数据。比如：
LocalStorage.clear()删除本地存储的所有数据。如local storage . clear()；//保存的“年龄/28”和“姓名/张三”的键/值对也被删除。所有本地数据再见。(5)另外，sessionStorage中的四个函数与上面localStorage类的基本相同，不再赘述。
以下是一个小例子：
脚本类型= text/JavaScript 本地存储。setitem( name ，张三);localStorage.setItem(age ， 28 )；verify()；//验证本地存储本地存储。删除项目(“名称”)；verify()；//验证名字是否存在本地存储。clear()；verify()；//验证名字和年龄是否存在//自定义验证函数，验证名字和年龄的数据是否存在函数verify(){ var type=本地存储。getitem( name )；var价格=本地存储。getitem( age )；类型=类型？类型： 不存在；价格=价格？价格： 不存在；警报(姓名： 类型\n\n 年龄： 价格);}/脚本三、localStorage过期策略
由于html5没有给本地存储设置过期策略，那么在处理数据的过期策略的时候可以编写自己过期策略程序，如下：
！DOCTYPEheadmeta http-equiv= Content-Type Content= text/html；charset=utf-8 /meta http-equiv= Access-Control-Allow-Origin content= anonymous titlelocstorage过期策略/title/head body/body/html脚本函数集(key，value){ var curtime=new Date().getTime()；//获取当前时间localStorage.setItem(key，JSON.stringify({val:value，time:curtime }))；//转换成数据字符串序列/* 说明：JSON.parse用于从一个字符串中解析出数据对象，如var str={name :黄小剑,年龄: 23} 结果：JSON.parse(str)对象年龄： 23 名称：黄小剑__proto__:对象注意：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常JSON.stringify()用于从一个对象解析出字符串，如var a={a:1，b:2}结果：JSON.stringify(a) {a:1， b:2} */}function get(key，exp)//exp是设置的过期时间{ var val=本地存储。getitem(key)；//获取存储的元素var data obj=JSON。parse(val)；//解析出数据对象如果(新日期()。getTime() - dataobj.time exp)//如果当前时间-减去存储的元素在创建时候设置的时间过期时间{控制台。日志(“过期”)；//提示过期} else {控制台。日志( val=数据对象。val)；} }/脚本使用操作如下图所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。