文档章节

HTML5的sessionStorage和localStorage

QT2015
 QT2015
发布于 2015/12/10 13:24
字数 1167
阅读 60
收藏 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移动页面框架--Junior

Junior 是一个前端的框架,用来构建 HTML5 的移动 Web 应用,外观跟原生应用一致,特点: 为移动性能优化的 CSS3 转换 使用 flickable.js 的可滑动旋转效果 集成 backbone.js 视图和路由 CS...

匿名
2013/01/05
4W
5
JS实现的1080p视频解码方案--ORBX.js

ORBX.js是Mozilla、OTOY、Autodesk和南加州大学联合开发的一款基于JavaScript和WebGL的HD编解码器,让1080p视频解码和云游戏都可以完全靠JS完成。这为HTML5高清视频提供了一种纯JavaScript替...

匿名
2013/05/07
2.4K
0
看个片儿不发烫

替换中国大陆主流视频网站的 Flash 播放器为 HTML5 播放器 使用 Mac 的同学都可能碰到过在线看视频引起机子风扇狂转、机身发烫等情况,这是因为 Flash 占用了过多系统资源的缘故。 目前主流视...

匿名
2013/05/12
5.9K
4
静态资源增量更新--hcliuLoad

依赖node.js环境 依赖java环境 node.js 安装 http://nodejs.org/ 下载最新版本安装 安装完成后 在windows的命令行 输入 node回车 如果成功进入node环境 则说明安装正确 java 安装 http://www...

卢勇福
2013/06/29
731
0
价值100W的经验分享: 基于JSPatch的iOS应用线上Bug的即时修复方案,附源码.

限于iOS AppStore的审核机制,一些新的功能的添加或者bug的修复,想做些节日专属的活动等,几乎都是不太可能的.从已有的经验来看,也是有了一些比较常用的解决方案.本文先是会简单说明对比大部分...

ios122
2015/12/07
2K
1

没有更多内容

加载失败,请刷新页面

加载更多

搞网站的你,不了解一下共享虚拟主机和备案问题

正文共:1474字 14图,预估阅读时间:4 分钟 今天分享的这一切要从域名备案说起。先科普一下,平时我们访问网站都是用域名访问的,通过DNS服务器将域名解析为IP地址(你知道上网时输入的URL...

郭松成
昨天
12
0
10 分钟学会 pillow 图像处理 16 式

PIL:Python Imaging Library,是Python环境下最受欢迎的图像处理库之一。 pillow简单优雅而功能强大,是图像相关机器学习任务中算法工程师的亲密合作伙伴。 我们将介绍pillow的如下16个图片...

zglg
昨天
3
0
3大排行榜告诉你,Java&Python有多稳

什么编程语言最受欢迎? 零基础小白学什么语言最好找工作? …… 关于这些问题的讨论从来都没停止 今天领扣🐱就来盘点一下 如今最受欢迎的语言到底是什么 Java&Python学习大礼包 资料领取方...

Lintcode
今天
10
0
这道原题答出来了还是跪!今年面试也太难了……

秋招已然到来,Amazon这不又发了一堆岗位,此时可以说是上岸最好机会!不过上周有同学反馈面试亚麻,遇到一题曾经刷过,惨的是最后还是跪了,班班仔细一问原来是这道。 给定一个整数序列,找...

九章算法
今天
0
0
【你只需看一次】YOLO 全系列目标检测算法

文章目录 一、概述 二、Yolo系列全家桶 YOLOv1 开山鼻祖之作 YOLOv2 YOLOv3 YOLOv4 目标检测tricks集大成者 YOLOv5 Fast YOLO Complex-YOLO MV-YOLO YOLO3D YOLO-6D YOLO-LITE Spiking-YOLO ......

osc_5p8bxoq2
28分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部