H5 Web 存储[原创]

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

内容简介: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的打赏,我们会更加努力!    如果您想成为作者,请点我


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

查看所有标签

猜你喜欢:

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

Java RESTful Web Service实战

Java RESTful Web Service实战

韩陆 / 机械工业出版社 / 2014-10-1 / 69.00

国内首本完整、深度地讲解如何基于Java标准规范实现REST风格的Web服务的专著,阿里巴巴Java技术专家12年开发经验结晶,3位业内著名技术专家联袂推荐!不仅深刻解读了最新的JAX-RS标准和其API设计,以及Jersey的使用要点和实现原理,而且系统讲解了REST的基本理论,更重要的是从实践角度深度讲解了如何基于Jersey实现完整的、安全的、高性能的REST式的Web服务。 《Jav......一起来看看 《Java RESTful Web Service实战》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试