H5 Web 存储[原创]

栏目: Html5 · 发布时间: 6年前

内容简介:H5 Web 存储最近碰到一些问题,比如说项目中有些常用的信息如果缓存保留下来,之前写web前端开发的时候很少想到这些问题,因为数据都是后端给我们缓存好的,我们不需要关心缓存问题,然而随着小程序的火起来,个人也学习了小程序的语法,发现他们有一套单独用户数据缓存的接口(参考路由Htm5是一个新的html标准,加入了新的特性,web存储就为客户端存储数据提供了两种新的方法:

H5 Web 存储

最近碰到一些问题,比如说项目中有些常用的信息如果缓存保留下来,之前写web前端开发的时候很少想到这些问题,因为数据都是后端给我们缓存好的,我们不需要关心缓存问题,然而随着小程序的火起来,个人也学习了小程序的语法,发现他们有一套单独用户数据缓存的接口(参考路由 https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxsetstorageobject ),于是我就去百度一下h5的缓存机制,又让自己学到了一些新的知识。

Htm5是一个新的html标准,加入了新的特性,web存储就为客户端存储数据提供了两种新的方法:

localStorage – 没有时间限制的数据存储

sessionStorage – 针对一个 session 的数据存储

web之前存储数据的时候,很多时候是借助于cookie存储数据的,但是cookie并不适合存储大量的数据,对于单条数据的存储大小不能大于4K,或者就会被截取,同时cookie也存在安全性的问题

1.localstorage

localstorage用于持久化的本地存储,除非主动删除数据,否则数据是永远也不过期的。

如何创建以及使用,一下提供案例:

</div>
<div>

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>localStorage使用案例</title>

<script type="text/javascript">

if (localStorage.name && localStorage.phone) {

alert("存储的姓名和手机号:" + localStorage.name + " "+ localStorage.phone)

}

 

function submit() {

localStorage.name=document.getElementById('name').value;

localStorage.phone=document.getElementById('phone').value;

 

document.getElementById("content").innerHTML="存储的姓名和手机号:" + localStorage.name + " "+ localStorage.phone;

}

</script>

</head>

<body>

<input type="text" id="name" placeholder="请输入姓名">

<input type="text" id="phone" placeholder="请输入手机号">

<input type="button" onclick='submit()' value="提交">

<div id="content"></div>

</body>

</html>

每次重新输入姓名和手机号,都可以重新存入localstorage,而刷新页面也会记录之前的存的信息

2.sessionstorage

sessionstorage用于本地存储一个会话(session)中的数据,这个数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionstorage不是一种持久化的本地存储,仅仅是会话级别的存储。

每次重新输入姓名和手机号,都可以重新存入sessionstorage,而刷新页面也会记录之前的存的信息,但是关闭浏览器再次打开时,信息不复存在

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>sessionStorage使用案例</title>

<script type="text/javascript">

alert("存储的姓名和手机号:" + sessionStorage.name + " "+ sessionStorage.phone+'; 请关闭浏览器窗口页面然后信息会重置')

 

function submit() {

sessionStorage.name=document.getElementById('nameS').value;

sessionStorage.phone=document.getElementById('phoneS').value;

 

document.getElementById("content").innerHTML="存储的姓名和手机号:" + sessionStorage.name + " "+ sessionStorage.phone;

}

</script>

</head>

<body>

<input type="text" id="nameS" placeholder="请输入姓名">

<input type="text" id="phoneS" placeholder="请输入手机号">

<input type="button" onclick='submit()' value="提交">

<div id="content"></div>

</body>

</html>

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/24403.html

H5 Web 存储[原创]

H5 Web 存储[原创] 微信打赏

H5 Web 存储[原创] 支付宝打赏

感谢您对作者ada的打赏,我们会更加努力!    如果您想成为作者,请点我


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

世界因你不同

世界因你不同

李开复、范海涛 / 中信出版社 / 2010 / 29.8

这是李开复唯一的一本自传,字里行间,是岁月流逝中沉淀下来的宝贵的人生智慧和职场经验。捣蛋的“小皇帝”,11岁的“留学生”,奥巴马的大学同学,26岁的副教授,33岁的苹果副总裁,谷歌中国的创始人,他有着太多传奇的经历,为了他,两家最大的IT公司对簿公堂。而他的每一次人生选择,都是一次成功的自我超越。   透过这本自传,李开复真诚讲述了他鲜为人知的成长史、风雨兼程的成功史和烛照人生的心灵史,也首次全面......一起来看看 《世界因你不同》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具