Web Storage

时间 2019-11-20

标签 web storage 栏目 HTML 繁體版

原文原文链接

1、Web Storage是什么？css

在HTML4中可使用Cookie，在客户端保存诸如用户名等简单的用户信息。可是经过长期的使用，人们发现用Cookie存储数据存在如下几个问题：html

　　　　大小：Cookie的大小被限制在4kb。前端

　　　　带宽：Cookie是随HTTP事务一块儿被发送的,所以会浪费一部分发送Cookie时使用的带宽。apache

　　　　复杂性：要正确的操做Cookie是很困难的。浏览器

针对这些问题，在HTML5中从新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。Web Storage功能，顾名思义，就是在Web上存储数据的功能。这里的存储是针对客户端本地而言的。Web Storage与Cookie类似，区别是:服务器

　　　　Web Storage能够存储更大容量的数据（通常为5MB）。session

　　　　Web Storage仅在客户端（即浏览器）中保存，不参与和服务器的通讯。dom

　　　　Web Storage拥有setItem()、getItem()、removeItem()、clear()等方法，不像Cookie，须要前端开发者本身封装setCookie、getCookie。ide

2、localStorage和sessionStorage函数

Web Storage分为两种：sessionStorage和localStorage。

sessionStorage将数据保存在Session对象中。所谓Session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所通过的这段时间。存储在sessionStorage里面的数据在页面会话结束时会被清除，页面会话在浏览器打开期间一直保持，而且从新加载或恢复页面仍会保持原来的页面会话，不会消除数据。

localStorage将数据保存在客户端本地的硬件设备（一般指硬盘，也能够是其余硬件设备中），即便浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站的时候仍然能够继续使用。

相同点

一、都是保存在浏览器端

都是保存在浏览器端的数据，不一样浏览器没法共享localStorage和sessionStorage信息。

二、都是同源的

不一样源的页面没法共享localStorage和sessionStorage信息。所谓同源就是同域名、同端口、同协议。

三、操做方法相同

localStorage和sessionStorage都具备相同的操做方法，不但能够用自身的setItem()，getItem()等方便存取，也能够像普通对象同样用点“.”操做符，及“[]”的方式进行数据存取。（下文有详细介绍）

不一样点

一、生命周期不一样

localStorage为永久存储，除非用户手动清除localStorage信息，不然这些信息将永远存在。

sessionStorage为临时保存，生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么全部经过sessionStorage存储的数据也就被清空了。

二、做用域不一样

首先明确的是：不一样浏览器没法共享localStorage或sessionStorage信息；不一样源的页面没法共享localStorage或sessionStorage信息。

localStorage信息能够在相同浏览器中同源的不一样页面间共享，能够是在不一样标签页中的页面、也能够是在不一样窗口的页面。

sessionStorage信息不能够在不一样页面或标签页间共享，即便是相同浏览器、相同学口中的同源页面。这里须要注意的是：

　　页面及标签页仅指顶级窗口，若是一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是能够共享sessionStorage的。

　　在当前页面经过a连接打开的同源页面，也能够访sessionStorage数据，不管是哪一种跳转方式。

　　使用window.open和localtion.href打开的同源页面也能够获取到sessionStorage数据。

这是由于sessionStorage是页面级的，只有所有关闭当前页和从其内部打开的全部页面，或者直接关闭浏览器，才能够消除当前页的sessionStorage数据。

为了验证，我准备了两个html文件，一个是index.html，另外一个是other.html。

index.html代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <a href="other.html" target="_blank">other.html</a>
</head>
<body>
</body>
<script>
    //演示设置Storage的三种方法
    var oLStorage = window.localStorage; 
    var oSStorage = window.sessionStorage; 
    oLStorage.setItem("localName","zhangsan");
    oLStorage.localAge="25";
    oLStorage["localSex"]="nan";
    oSStorage.setItem("sessionName","zhangsan");
    oSStorage.sessionAge="25";
    oSStorage["sessionSex"]="nan";
</script>
</html>

other.html代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>other</title>
</head>
<body>
    <p>other.index和index.html属于相同域名和端口的页面</p>
</body>
<script>
    console.log('localStorage'+window.localStorage);
    console.log('sessionStorage'+window.sessionStorage);
</script>
</html>

从index.html点击a连接进入other.html，在other.html的Application里能够看到localStorage和sessionStorage。

打开一个新的标签页，直接输入other.html的地址，在other.html的Application里能够看到localStorage，却看不到sessionStorage。

3、Web Storage的操做方法

localStorage和sessionStorage都具备相同的操做方法,下文以sessionStorage为例，localStorage相似。

　　setItem()存储value
　　用途：将value存储到key字段
　　用法：.setItem( key, value)
　　代码示例：

sessionStorage.setItem("name", "zhangsan");

　　getItem()获取value
　　用途：获取指定key本地存储的值
　　用法：.getItem(key)
　　代码示例：

var value = sessionStorage.getItem("name");

　　removeItem()删除value
　　用途：删除指定key本地存储的值
　　用法：.removeItem(key)
　　代码示例：

sessionStorage.removeItem("name");

　　clear()清除全部的key/value
　　用途：清除全部的key/value
　　用法：.clear()
　　代码示例：

sessionStorage.clear();

　　key() 获取键值

　　用途：获取指定索引index对应的键值key

　　用法：.key(index)

　　代码示例：

sessionStorage.key(0);

　　length 获取长度

　　用途：获取本地存储的长度

　　用法：.length

　　代码示例：

sessionStorage.length

Web Storage不但能够用自身的setItem(),getItem()等方便存取，也能够像普通对象同样用点“.” 操做符，及“[]”的方式进行数据存取，像下例的代码：

var oSStorage = window.sessionStorage;
oSStorage.setItem("sessionName","zhangsan");
oSStorage.sessionAge="25";
oSStorage["sessionSex"]="nan";

4、storage 事件

对 storage 对象进行任何修改，都会在文档上触发 storage 事件。当经过属性或 setItem() 方法保存数据，使用 delete 操做符或者 removeItem() 删除数据，或者调用 clear() 方法时，都会触发该事件。

能够对storage事件进行监听：

object.addEventListener("storage", 监听函数,false/true);

　　storage的event 对象有以下属性：

　　key：设置或者删除的键名。
　　oldValue:表示变动前的值。

　　newValue:变动后的值，若是是设置值，则是新值；若是是删除键，则是 null。

　　url:事件触发源的URL。

　　source:事件触发源的URL。

　　storageArea:受到影响的storage对象。

　　domain 发生变化的存储空间的域名。