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


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

查看所有标签

猜你喜欢:

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

图解服务器端网络架构

图解服务器端网络架构

[日] 宫田宽士 / 曾薇薇 / 人民邮电出版社 / 2015-4 / 79.00元

本书以图配文,详细说明了服务器端网络架构的基础技术和设计要点。基础设计是服务器端网络架构最重要的一个阶段。本书就立足于基础设计的设计细分项目,详细介绍各细分项目的相关技术和设计要点。全书共分为5章,分别讲述进行物理设计、逻辑设计、安全设计和负载均衡设计、高可用性设计以及管理设计时所必需的技术和设计要点。一起来看看 《图解服务器端网络架构》 这本书的介绍吧!

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

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

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

HTML 编码/解码