web离线应用--dom storage

dom storage是html5添加的新功能,其实也不是什么新的应用,只不过是cookie的放大版本,由于cookie的大小只有4kb,而且在每次请求一个新页面cookie都会被送过去等等...所以html5提供了一种新标准接口,存储容量更大(5M),以键值对存储,很方便使用。

dom storage分为local storagesession storage两种方式,这两种方式的操作完全一样,唯一的区别就是session storage在页面关闭时不可继续使用,local storage则可以。

dom storage接口如下:

interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
deleter void removeItem(in DOMString key);
void clear();
};

length:返回当前存储在 Storage 对象中的键值对数量。

key(index):返回列表中第 n 个键的名字。Index 从 0 开始。

getItem(key):返回指定键对应的值。

setItem(key, value):存入一个键值对。

removeItem(key) :删除指定的键值对。

clear():删除 Storage 对象中的所有键值对。

通常,使用最多的方法是 getItem 和 setItem。

以localStorage为栗子,sessionStorage操作方式与localStorage一致

    // 存储 以下两种方式均可
window.localStorage.setItem('key1', 'value');
window.localStorage.key1 = 'value';
// 取值
var key1 = window.localStorage.getItem('key1');
var key2 = window.localStorage.key1;
//删除
window.localStorage.removeItem('key1');
// 清除
window.localStorage.clear();

骚年就这样子了,前面写一堆只是为了后面那几行代码,简单吧。。赶紧按下F12试试吧

在chrome下操作的同学可以在resources-->local/session storage选项看到你的操作结果

注意:dom storage存进去取出来的值都是字符串格式,如果不是你想要的格式你只能自行转换,你也可以使用JSON进行格式化

JSON.parse() 函数会把 JSON 对象转换为原来的数据类型。

JSON.stringify() 函数会把要保存的对象转换成 JSON 对象保存。

个人随笔,如有错误欢迎大神指正

参考

浅谈 HTML5 的 DOM Storage 机制

使用 HTML5 开发离线应用

web离线应用--dom storage的更多相关文章

  1. 浅谈 HTML5 的 DOM Storage 机制 (转)

    在开发 Web 应用时,开发者有时需要在本地存储数据.当前浏览器支持 cookie 存储,但其大小有 4KB 的限制.这对于一些 Ajax 应用来说是不够的.更多的存储空间需要浏览器本身或是插件的支持 ...

  2. HTML5在线状态检测和DOM Storage

    除了离线资源缓存外,html5离线应用开发还可能用到以下技术 在线状态检测 navigator.onLine navigator.onLine 属性表示当前是否在线.如果为 true, 表示在线:如果 ...

  3. 【转载】跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    跟随 Web 标准探究DOM -- Node 与 Element 的遍历 这个是 Joyee 2014年更新的,可能是转战github缘故,一年多没有跟新了.这篇感觉还挺全面,就转载过来,如以前文章一 ...

  4. localForage——轻松实现 Web 离线存储

    Web 应用程序有离线功能,如保存大量数据集和二进制文件.你甚至可以做缓存 MP3 文件这样的事情.浏览器技术可以保存离线数据和大量的储存.但问题是,如何选择合适技术,如何方便灵活的实现. 如果你需要 ...

  5. Web持久化存储Web SQL、Local Storage、Cookies(常用)

    在浏览器客户端记录一些信息,有三种常用的Web数据持久化存储的方式,分别是Web SQL.Local Storage.Cookies. Web SQL 作为html5本地数据库,可通过一套API来操纵 ...

  6. POPTEST培训:web自动化测试之DOM

    POPTEST培训:web自动化测试之DOM   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq ...

  7. Augmenting DOM Storage with IE's userData behavior

    http://www.javascriptkit.com/javatutors/domstorage2.shtml Augmenting DOM Storage with IE's userData ...

  8. Web API & Element & DOM

    Web API & Element & DOM Element https://developer.mozilla.org/en-US/docs/Web/API/Element HTM ...

  9. Web离线存储的几种方式

    随着HTML5的正式定稿,我们也可以大量使用HTML离线网络应用程序的特性. #1.Application Cache Application Cache 可以很简单让我们的WebApp具有离线的能力 ...

随机推荐

  1. Linux入门(6)——Ubuntu16.04安装atom

    打开终端,依次输入: sudo add-apt-repository ppa:webupd8team/atom sudo apt-get update sudo apt-get install ato ...

  2. JUnit5 安装与使用

    虽然JUnit5 的测试版本早就出来了,但正式版直到几年9月份推出,目前最新版5.0.1.几乎所有的Java 开发人员都会使用JUnit 来做测试,但其实很多自动化测试人员也会使用Junit .目前, ...

  3. 【NOIP2016 Day1 T2】天天爱跑步

    题目传送门:https://www.luogu.org/problemnew/show/P1600 感觉这两天在处理边界问题上有点神志不清......为了从80的暴力变成100,花了整整一个下午+一个 ...

  4. tp5引入第三方类库

    1.在/public/index.php中添加 define('EXTEND_PATH', '../extend/'); 2./extend/lib 中添加第三方类,类文件的名称和类名一样,命名空间为 ...

  5. 从入门到放弃之IO

    浅说IO 学到现在利用过的特殊符号不少组合起来很多都有让人眼前一亮的用法,在这里先聊聊I/O的一些相关知识. 本文开始之前先介绍一下需要知道的一些小知识和需要注意的地方. 在linux中也是有优先级的 ...

  6. makefile学习笔记(一)

    1.1:make概述 在linux环境下使用make工具能够比较容易的构建一个属于自己的工程,整个工程的编译只需要一个命令就可以完成编译.连接以至于最后的执行.不过我们需要投入一些时间去学习如何完成m ...

  7. Django+Nginx+uWSGI部署

    一.介绍 Django的部署可以有多种方式,采用nginx+uwsgi的方式是最常见的一种方式.在这种方式中,将nginx作为服务器前端,接收WEB的所有请求,统一管理请求.nginx把所有静态请求自 ...

  8. 推荐一款不错的反编译软件:Reflector

    只需要把要反编译的dll拖放到程序窗口就可以看到code了.是不是很简单,快来试试吧.不只是可以反编译个人写的code,.Net库一样可以查看代码.想学习.Net核心代码的可以试试看.

  9. code forces 436 C. Bus

    C. Bus time limit per test 2 seconds memory limit per test 256 megabytes input standard input output ...

  10. Peaceful Commission

    Peaceful Commission Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...