文档章节

HTML5 之 web本地存储

w-rain
 w-rain
发布于 2016/03/17 15:37
字数 834
阅读 1380
收藏 57

客户端存储数据的2种新方式

以前我们都使用cookie存储客户端不只一次使用的数据,html5又带来了2种新方式:localStorage 与 sessionStorage,比cookie存储机制更有优势。

sessionStorage

sessionStorage的介绍: 所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存这段时间内所要求保存的任何数据。

特点:临时保存,将数据保存再session对象中,当用户关闭浏览器窗口后,数据会被删除。

使用方法:

    保存数据:sessionStorage.setItem(key, value);

    读取数据:变量 = sessionStorage.getItem(key);

在保存数据时,如果使用sessionStorage读取或保存数据,则需要使用sessionStorage对象并调用该对象的读取方法。保存时不允许重复保存相同的简明,保存后可以修改键值,但不允许修改键名(只能重新取键名,然后保存键值)。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>web Storage示例</title>
    <script type="text/javascript" src="js/storage.js"></script>
</head>
<body>
    <h1>web Storage 示例</h1>
    <p id="info"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveData()">
<input type="button" value="读取数据" onclick="loadData()">
</body>
</html>
function saveData(){
    var btn = document.getElementById("input");
    var v = btn.value;
    sessionStorage.setItem("msg",v);
};

function loadData(){
    var btn2 = document.getElementById("info");
    var v2 = sessionStorage.getItem("msg");
    btn2.innerHTML = v2;
}


执行效果如下,存储于本地sessionStorage数据库,关闭浏览器重新打开,数据被删除。




localStorage

localStorage的介绍:将数据保存再客户端本地的硬件设备(通常指硬盘,但也可以是其他硬件设备)中,即使浏览器被关闭了,该数据依然存在,下次打开浏览器范文网站时仍然可以继续使用。

特点:永久保存,没有时间限制的数据存储。

使用方法:

    保存数据:localStorage.setItem(key, value);

    读取数据:变量 = localStorage.getItem(key);

在保存数据时,如果使用localStorage读取或保存数据,则需要使用localStorage对象并调用该对象的读取方法。保存时不允许重复保存相同的简明,保存后可以修改键值,但不允许修改键名(只能重新取键名,然后保存键值)。

示例:

function saveData(){
    var btn = document.getElementById("input");
    var v = btn.value;
    localStorage.setItem("msg",v);
};

function loadData(){
    var btn2 = document.getElementById("info");
    var v2 = localStorage.getItem("msg");
    btn2.innerHTML = v2;
}


执行效果如下,存储于本地localStorage数据库,关闭浏览器重新打开,数据不会被删除。



注意!!!:localStorage的数据保存是按不同的浏览器分别进行的,也就是说,如果打开别的浏览器,是读取不到在这个浏览器中保存的数据的。

localStorage和sessionStorage 与 cookie的对比:

cookie不适合大量数据的存储,因为他们由对每个服务器的请求来传递,这使得cookie速度很慢效率也不高。cookie存储机制主要有以下几方面的问题:

    大小:    cookies的大小被限制在4KB。

    带宽:    cookies是随HTTPS事务一起被发送的,因此会浪费一部分发送cookies时使用的带宽。

    复杂性: 要正确地操作cookies还是很困难的。



© 著作权归作者所有

w-rain
粉丝 27
博文 54
码字总数 46502
作品 0
成都
程序员
私信 提问
加载中

评论(3)

pennymei
pennymei
OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台,可以定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。可以在官网注册体验哦~
抢小孩糖吃
抢小孩糖吃
学习了,最近要用sessionStorage
51pansou
51pansou
学习了
分享6个实用的HTML5本地存储(Local Storage)教程

日期:2011/12/12 来源:GBin1.com HTML5 中最强大并且最具有魅力的特性在于本地存储,使用本地存储可以大大的节约服务器端的压力,并且可以有效的利用客户端的计算性能。使用HTML5可以在客户...

gbin1
2011/12/12
2.9K
1
HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

lg2045
2014/10/09
95
0
html5 sessionStorage 与 localStorage使用详解

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

Adam-Lee
2012/08/22
16.9K
1
HTML 5 Web 存储-sessionStorage和localStorage

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 sessionStorage用于本地存储一个会话(session)中的数...

两毛五哥哥
2017/11/02
0
0
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN
2018/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

领域驱动中的“贫血症和失忆症”

贫血症严重危害着人类健康,并且伴随有危险的副作用。当贫血领域对象被首次提出来时,它并不是一个博得赞美的词汇,它描述的是一个缺少内在行为领域对象。奇怪的是,人们对于贫血领域对象的态...

还仙
15分钟前
3
0
条码打印软件中标签预览正常打印无反应怎么解决

在使用条码打印软件制作标签时,有客户反馈,标签打印预览正常的,但是打印无反应,咨询是怎么回事?今天针对这个情况,可以参考以下方法进行解决。 一、预览正常情况下,打印没反应 (1)在条码...

中琅软件
25分钟前
3
0
判断字符串的时候

判断字符串的时候一定把常量房前边, //报警程度 String leve = vo.getDeviceAlertDeal().getWarnLevel(); if(("0").equals(leve)) { row.add("无报警"); }else if(("1").equals(leve)) { ro......

简小姐
25分钟前
5
0
Linux maven3.6.2 install

PS:安装 maven 之前请先安装 jdk 1.安装 wget 命令(安装过就不用了) yum -y install wget 2.寻找需要的 maven 版本 https://maven.apache.org/download.cgi 3.进入 /var/local 文件夹 cd...

东方神祇
28分钟前
4
0
Tomcat源码分析二:先看看Tomcat的整体架构

Tomcat源码分析二:先看看Tomcat的整体架构 Tomcat架构图 我们先来看一张比较经典的Tomcat架构图: 从这张图中,我们可以看出Tomcat中含有Server、Service、Connector、Container等组件,接下...

flygrk
30分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部