这篇文章主要介绍了localStorage本地存储和sessionStorage会话存储实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇localStorage本地存储和
这篇文章主要介绍了localStorage本地存储和sessionStorage会话存储实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇localStorage本地存储和sessionStorage会话存储实例分析文章都会有所收获，下面我们一起来看看吧。
HTML5允许在客户端实现较大规模的数据存储，用户可以使用WEB存储，也可以使用web sql数据库，这两项新增功能为浏览器成为应用程序开发平台奠定了坚持的数据操作基础。
Web存储机制是一中通过字符串形式的key/value对来安全的存储和使用数据的方法，其目标是提供一个更全面的，可以创建交互式Web应用程序的方法。
一、web存储和cookie的对比：
1）首先是容量不同，web存储的存储量更大，更安全，更易于使用，而Cookie的存储量是有限制的。
2）存储的持久性不同，web存储是通过浏览器来永久存储和李大小的数据的方法
二、本地存储和会话存储
在客户端存储数据的类型有两种：
1）localStorage ： 本地存储，没有时间限制的数据存储
2）sessionStorage ： 会话存储，针对一个会话期的数据存储
下面就写一个简单的例子，在客户端持久存储数据
js代码 收藏代码
var strDomain = "127.0.0.1"; //定义当前域
try{
var oStorage = window.localStorage ? window.localStorage : window.globalStorage[strDomain]; //h获取存储区域
//查看vistorCount是否存在
//如果存在就读取并加1，增加一次访问统计
//如果不存在就意味着第一次访问，将其初始化为1
if(oStorage.visitorCount){
oStorage.visitorCount = parseInt(oStorage.visitorCount,10) + 1;
} else {
oStorage.visitorCount = 1;
}
document.write("欢迎第" + oStorage.visitorCount + "次访问"); //写出访问统计数据
} catch(err) {
alert(err.message ? err.message : err.toString());
}
同时我们使用开发人员工具（我使用的是Chrome浏览器）可以清晰的看到在客户端存储的数据。
在会话期存储数据
SessionStorage针对一个Session进行数据存储，当用户关闭浏览器窗口后，数据会被删除。
下面的代码用于创建一个提交表单：
html代码 收藏代码
<body>
<fORM action="anotherPage.jsp" method="get">
<input name="myName" id="myName" type="text" onblur="oStorage.myName.value=this.value">
<input name="mySubmit" type="submit"/>
</form>
<script>
try{
var oField = document.getElementById(myName);
oStorage = window.sessionStorage;
//查看是否存在myNameValue键
if(oStorage.myNameValue){
oField.value = oStorage.myNameValue;
}
}catch(err){
alert(err.message ? err.message : err.toString());
}
</script>
</body>
关于“localStorage本地存储和sessionStorage会话存储实例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“localStorage本地存储和sessionStorage会话存储实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网html频道。
--结束END--
本文标题: localStorage本地存储和sessionStorage会话存储实例分析
本文链接: https://www.lsjlt.com/news/95984.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0