文档章节

HTML5的sessionStorage和localStorage

QT2015
 QT2015
发布于 2015/12/10 13:24
字数 1167
阅读 56
收藏 3

前言:html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

一、web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

二、html5 web storage的浏览器支持情况

Chrome4+ 开始支持localStorage
Firefox3.5+开始支持localStorage
Firefox1.5+支持globalStorage
IE8+支持localStorage
IE7兼容模式支持localStorage
IE5.5+支持userdata
Safari 4+ 支持localStorage
Opera10.5+支持localStorage

if(window.localStorage){     alert("浏览支持localStorage") }else{    alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ 	alert("浏览暂不支持localStorage") }

三、localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

1、setItem存储value

用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:

sessionStorage.setItem("key", "value"); 	localStorage.setItem("site", "js8.in");

2、getItem获取value

用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:

var value = sessionStorage.getItem("key"); 	var site = localStorage.getItem("site");

3、removeItem删除key

用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:

sessionStorage.removeItem("key"); 	localStorage.removeItem("site");

4、clear清除所有的key/value

用途:清除所有的key/value
用法:.clear()
代码示例:

sessionStorage.clear(); 	localStorage.clear();

5、其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);

6、localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

var storage = window.localStorage; for (var i=0, len = storage.length; i  <  len; i++){     var key = storage.key(i);     var value = storage.getItem(key);     console.log(key + "=" + value); }

7、storage事件

存储事件只是浏览器在数据变化发生之后给你的一个通知。当setItem(),removeItem()或者clear() 方法被调用,并且数据真的发生了改变时,storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是空的,你 再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。

storage事件对象的属性:

  • storageArea: 表示存储类型(Session或Local)

  • key:发生改变项的key

  • oldValue: key的原值

  • newValue: key的新值

  • url*: key改变发生的URL

四、Web Storage Demo

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>webStorage之增删改查</title>
    <style type="text/css">
        textarea {
            width: 300px;
            height: 300px;
        }
        .button {
            width: 100px;
        }
    </style>
</head>
<body onload="init()">
    <script type="text/javascript">
        //使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。
        //页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。
        var t1;
        var t2;
        var sStorage;
        var lStorage;
        function init() {//初始化t1,t2
            t1 = document.getElementById("t1");
            t2 = document.getElementById("t2");
            sStorage = window.sessionStorage;
            lStorage = window.localStorage
        }
        function saveSession() {
            sStorage.mydata = t2.value;
            t1.value += "sessionStorage保存mydata:" + t2.value + "\n";
        }
        function readSession() {
            t1.value += "sessionStorage读取mydata:" + sStorage.mydata + "\n";
        }
        function cleanSession() {
            t1.value += "sessionStorage清除mydata:" + sStorage.mydata + "\n";
            sStorage.removeItem("mydata");
        }
        function saveStorage() {
            lStorage.mydata = t2.value;
            t1.value += "localStorage保存mydata:" + t2.value + "\n";
        }
        function readStorage() {
            t1.value += "localStorage读取mydata:" + lStorage.mydata + "\n";
        }
        function cleanStorage() {
            t1.value += "localStorage清除mydata:" + lStorage.mydata + "\n";
            lStorage.removeItem("mydata");
        }
    </script>
    <div>
        <textarea id="t1"></textarea><br />
        <label>需要保存的数据: </label>
        <input type="text" id="t2" /><br />
        <input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" />
        <input type="button" class="button" onclick="readSession()" value="session读取" />
        <input type="button" class="button" onclick="cleanSession()" value="session清除" /><br />
        <input type="button" class="button" onclick="saveStorage()" value="local保存" />
        <input type="button" class="button" onclick="readStorage()" value="local读取" />
        <input type="button" class="button" onclick="cleanStorage()" value="local清除" />
    </div>
</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
QT2015
粉丝 8
博文 17
码字总数 9810
作品 0
广州
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
前端存储 - localStorage

发布自Kindem的博客,欢迎大家转载,但是要注意注明出处 localStorage 介绍 在HTML5中,引入了两个新的前端存储特性: localStorage sessionStorage 这两者非常相似,都是用来在前端保存一定...

Kindem
07/08
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
网站页面间脚本传至 sessionStorage

sessionStorage、localStorage详解 webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage。在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象...

小仙女KOMons
07/10
0
0
HTML5-localStorage、sessionStorage用法总结

localStorage和sessionStorage功能 localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只...

iNiL0119
2015/03/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

elastic search+kibana 5.6.12安装指南

前提准备: 1,安装jdk, We recommend installing Java version 1.8.0_131 or later. 2, 设置文件最大打开数(使用命令ulimit -n查看) ulimit -n 65536 3, 创建用户elastic/用户组elastic gro...

PageYi
23分钟前
2
0
安装mongodb碰到error: unpacking of archive failed on file /etc/init.d/mongod;5bcec214: cpio: open如何解决

今用yum安装mongodb4.0.3发现一个错误,当用yum install 安装mongo-org 时除了mongodb-org-server 没有安装以外其他的都安装正确,重新安装mongodb-org-server 时报如下错误信息 在一篇老外 ...

chanking
25分钟前
1
0
O2OA:企业办公数字化转型的更佳选择

在全球都在积极探索由新一轮信息技术所引发的第四次工业革命时,一场激发企业内生动力的数字化运动在互联网企业和传统企业之间却呈现出两种截然不同的状态。   传统企业办公数字化不彻底仍...

超能之法师
27分钟前
1
0
基于SylixOS 对 Goahead 进行配置使用 OpenSSL

1. 编译并部署OpenSSL SylixOS支持OpenSSL,git地址为:http://git.sylixos.com/repo/openssl.git 获取OpenSSL工程源码后,导入RealEvo-IDE中编译,编译完成后生成动态库文件和openssl可执行...

Baiqq
30分钟前
1
0
nginx+tomcat均衡负载

一、安装好nginx环境,启动至少两个的tomcat服务; 此处tomcat访问地址为:http://192.168.106.128:1000/、http://192.168.106.128:1001/、http://192.168.106.128:1002/ 二、修改nginx配置文...

狼王黄师傅
31分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部