HTML5 Web Storage

原创 2015年11月18日 21:42:40

HTML5 Web Storage

H5之前在浏览器客户端可以用cookies来存储数据,但是cookies存储永久数据时存在的问题还是很多的,比如:

大小受限,最多只能存储4KB

cookies会随HTTP请求一起发送,占用带宽,速度慢且效率低

不易操作


Web storage是H5新增的一个非常重要的功能,可以在Web上存储数据(针对浏览器本地而言,使用javascript进行存储和访问),但是,localStorage和sessionStorage**只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的**JSON对象的stringify和parse来处理

关于其兼容性(图片来自于网络)

这里写图片描述

可分为两种:

session storage

—-针对一个session对象的数据存储,用户关闭浏览器窗口时会被删除

格式:

存:
sessionStorage.setItem(key,value);
取:
var msg = sessionStorage.getItem(key);

localstorage

—-数据存于本地磁盘,没有时间限制,一般情况下是永久保存的,直到用户或程序主动删除。

localStorage是基于域的,是域内安全的,也就是说一个网站只能访问其自身的数据,在该域内的所有页面都可以访问客户端的基于这个域的localStorage,但是不同的浏览器厂家的浏览器之间的数据相互独立。

下面是一段网上找到的HTML5规范中定义的Storage的API:

interface storage{
    readonly attribute unsigned long length;
    DOMstring? key(in unsigned long: index);
    getter DOMstring getitem(in DOMstring key);
    setter creator void setItem(in DOMStrine key. in DOMString value);
    deleter void removeItem-(in DOMString key);
    vaid clear();
);

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

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

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

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

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

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

通常,使用最多的方法是 getItemsetItem

格式:

存:
localStorage.[key]=value;
取:
var value = localStorage.[key]=value;
//可使用localStorage.clear()删除数据

一个例子

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web storage</title>
    <style type="text/css">
        .sec{
            border:  1px #ccc solid;
        }
    </style>
</head>

<body>
    <div class="sec" >
    sessionStorage
        <p id="msg"></p>
        <input type="text" id="input"/>
        <input type="button" value="保存" onclick="saveStorage('input')" />
        <input type="button" value="读取数据" onclick="getStorage('msg')" />
    </div>
    <br/>
    <div class="sec">
    localStorage
        <p id="msg2"></p>
        <input type="text" id="input2"/>
        <input type="button" value="保存" onclick="saveStorage2('input2')" />
        <input type="button" value="读取数据" onclick="getStorage2('msg2')" />
    </div>

</body>
<script type="text/javascript">
    function saveStorage(id){
        var target = document.getElementById(id);
        var str = target.value;
        sessionStorage.setItem('message',str);
    }
    function getStorage(id){
        var target = document.getElementById(id);
        var msg = sessionStorage.getItem('message');
        target.innerHTML = msg;

    }

    function saveStorage2(id){
        var target = document.getElementById(id);
        var str = target.value;
        localStorage.msg = str;
    }
    function getStorage2(id){
        var target = document.getElementById(id);
        var msg = localStorage.msg;
        target.innerHTML = msg;

    }

</script>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

html5本地存储(Web Storage API)

1.浏览器可以存储5-10M内容,比以往的cookie4k容量高得多,注意是每个域名5M 2.localStorage.setItem ([string]key, [string]value);  /...
  • andrewleeeeee
  • andrewleeeeee
  • 2013年11月11日 20:03
  • 708

HTML5 Web存储(Web Storage)技术及用法

在如今的Web开发中,HTML5是大家讨论的最大一个话题。HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好、更快、更灵活的气力。这些新功能中有一个非常让我感兴趣...
  • qq_25403605
  • qq_25403605
  • 2015年08月28日 11:40
  • 1630

HTML5客户端数据存储Web Storage——localStorage与sessionStorage

HTML5提供了在客户端存储数据的新方法Web Storage 类似于HTML4中的Cookie 不过它要强大的多Cookie先来简单复习一下之前使用的cookiecookie存储数据到用户设备上...
  • q1056843325
  • q1056843325
  • 2017年01月18日 00:02
  • 1627

HTML5 网页存储 Web Storage

HTML5 网页存储 Web Storage 一、认识Web Storage Web Storage是一种将少量数据存储在客户端(client)磁盘的技术。只要支持WebStorage API规格...
  • cysear
  • cysear
  • 2015年07月21日 18:02
  • 1200

HTML5 Web Storage代码

HTML5 Web Storage 体验了一下HTML5 在HTML5中,除了Canvas元素之外,另一个新增的非常 重要的功能就是可以在客户端本地保存数据的Web Stora...
  • hephec
  • hephec
  • 2015年03月08日 00:36
  • 431

【HTML5与CSS3基础】HTML5本地存储 Web Storage

概述本地存储Web Storage实际上是HTML4的Cookies存储机制的一个改进版本。它的作用是在网站中把有用的信息存储到本地的计算机或移动设备上,然后根据需要从本地读取信息。Web Stora...
  • zgljl2012
  • zgljl2012
  • 2015年04月05日 15:32
  • 1351

HTML5中的本地存储sessionStorage、localStorage、Web SQL Database

sessionStorage对象应用 sessionStorage介绍、 在Html5中增加了一个Js对象:sessionStorage;通过此对象可以直接操作存储在浏览器中的会话级别的WebSto...
  • update_java
  • update_java
  • 2015年08月04日 11:19
  • 2133

html5 Web storage

web storage可以以key/value的方式保存数据,让我们的app在离线的情况下,依然可以读取上次浏览的记录。web storage 和 cookie的区别 可储存的资料量大小不同,cook...
  • yingxiake
  • yingxiake
  • 2016年03月14日 23:11
  • 421

HTML5 Web Storage 特性

原文地址: Using HTML5 Web Storage  原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5。...
  • mychirs
  • mychirs
  • 2014年09月03日 08:43
  • 257

HTML5开发 web storage

HTML5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 ses...
  • Bruce__Liu
  • Bruce__Liu
  • 2015年08月21日 17:28
  • 334
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 Web Storage
举报原因:
原因补充:

(最多只允许输入30个字)