H5 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

微信打赏

支付宝打赏

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