H5本地存储技术

时间 2019-12-09

标签 h5 本地存储技术繁體版

原文原文链接

H5 Web存储技术

前言

web存储技术在初期的时候被定义为HTML5的一部分做为其API。后来被独立出来做为一份独立的标准。
web存储标准包含localStorage对象和sessionStorage对象。
这两个对象其实是持久化关联数组，是名值对的映射表，“名”和“值”都是字符串。Web存储易于使用、支持大容量(但非无限量)数据存储同时兼容当前全部主流浏览器。html

经过web存储技术，可让一些本地应用数据存储变得更加的方便。web

介绍

Web Storage的目的是克服由cookie带来的一些限制，当数据须要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：提供一种在cookie以外存储会话数据的途径以及提供一种存储大量能够跨会话存在的数据的机制数组

Web Storage分红两类：sessionStorage和localStorage。sessionStorage保存的数据用于浏览器的一次会话，当会话结束(一般是该窗口关闭)，数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页能够直接读取之前保存的数据。除了保存期限的长短不一样，这两个对象的属性和方法彻底同样浏览器

它们很像cookie机制的强化版，可以动用大得多的存储空间。目前，每一个域名的存储上限视浏览器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存储空间由一级域名决定，而其余浏览器没有这个限制。也就是说，在Firefox中，a.example.com和b.example.com共享5MB的存储空间。另外，与Cookie同样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取服务器

经过检查window对象是否包含sessionStorage和localStorage属性，能够肯定浏览器是否支持这两个对象cookie

注意：IE浏览器不支持在本地使用storage。session

基本操做

存储数据

sessionStorage和localStorage保存的数据，都以“键对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。全部的数据都是以文本格式保存函数

注意：Storage类型只能存储字符串。非字符串的数据在存储以前会被转换成字符串网站

一、setItem()ui

咱们能够经过setItem()方法来存储数据。接受两个参数，第一个参数是键名，第二个参数是键值也就是保存的数据。

必定要注意，在不一样的浏览器当中，存储的storage位置并不同，不能通用。

sessionStorage.setItem("key","value");
localStorage.setItem("key","value");

二、getItem()

咱们能够经过getItem()方法读取数据。接受一个参数，就是键名。

var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");

三、经过属性操做的形式存取数据

除了使用setItem()和getItem()方法，还能够采用属性操做的形式来操做数据。

localStorage.setItem("key1","value1");
localStorage.testkey = 'testvalue';
console.log(localStorage.getItem('testkey'));//'testvalue'
console.log(localStorage.key1);//'value1'

清除数据

一、removeItem()

removeItem()方法用于清除某个键名对应的数据。

注意：清除不存在的键名不会报错，只会静默失败

sessionStorage.removeItem('key');
localStorage.removeItem('key');

除了使用removeItem()方法，还可使用delete操做来清除数据.

注意：IE7-浏览器不支持delete操做符来清除storage数据

localStorage.setItem("key1","value1");
delete localStorage.key1;
console.log(localStorage.key1);//undefined
console.log(localStorage.getItem('key1'));//null

二、clear()

clear方法用于清除全部保存的数据。

sessionStorage.clear();
localStorage.clear();

遍历操做

一、key()

key(index)方法返回index位置处的值的名字。

sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'
console.log(sessionStorage.key(1));//'key2'
console.log(sessionStorage.key(2));//null

二、length

length属性返回名值对儿的个数。

console.log(sessionStorage.length);//2

咱们利用length 和 key 能够遍历全部的键。

for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
}

还可使用for-in循环来迭代。

for(var key in localStorage){
    var value = localStorage.getItem(key);
}

存储事件

首先，要特别注意的是，该事件只发生在window对象上，在document对象上触发无效，且使用DOM0级、DOM2级事件处理函数均可以

不管对sessionStorage仍是localStorage进行操做，都会触发storage事件。当经过属性或setItem()方法保存数据，使用delete操做符或removeItem()删除数据，或者调用clear()方法时，都会发生该事件

注意：只有当存储数据真正发生改变的时候才会触发存储事件。像给已经存在的存储项设置一个如出一辙的值，抑或是删除一个原本就不存在的存储项都是不会触发存储事件的。经过getItem()方法获取数据也不会触发该事件

通常地，storage事件不在致使数据变化的当前页面触发。若是浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其余全部页面的storage事件会被触发，而原始页面并不触发storage事件。能够经过这种机制，实现多个窗口之间的通讯

注意：IE8-浏览器不支持storage事件，IE9+浏览器与其余标准浏览器有所不一样，不管数据真实值是否变化，只要对数据进行设置或删除，都会触发该事件，且原始页面和同一域名下的其余页面都会触发

这个事件的event对象有如下属性.

url:触发事件的连接地址
key:设置或者删除的键名
newvalue:若是是设置值，则是新值；若是是删除键，则是null
oldValue:键被更改以前的值
storageArea:返回触发事件的对象

下面是一个事件的应用案例：

a.html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多页面之间的通信</title>
</head>
<body>
    <h1>多页面之间的通信</h1>
    <!-- 在当前页面改变数据，会触发b页面的事件，可是当前页面不会触发 -->
    请输入你的留言： <br>
    <textarea name="" id="txt1" cols="50" rows="10" style="font-size: 30px;"></textarea>
    <button id="btn">点击存储</button>
    <hr>
    <iframe src="./b.html" frameborder="1" width="773" height="346"></iframe>
</body>
<script>
    // let user_name = "zhangsan";
    let btn = document.getElementById('btn');
    btn.onclick = function() {
        // 点击按钮获取用户输入的值
        let user_info = document.getElementById('txt1').value;
        // 向本地存储数据
        localStorage.setItem('zhangsan-1',user_info);
    }
    
    window.onstorage = function () {
        console.log("hello,world!");
    };
</script>
</html>

b.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多页面之间的通信</title>
</head>
<body>
    <script>
        window.onstorage = function (e) {
            var e = e || window.event;
            document.body.innerHTML = e.newValue;
        };
    </script>
</body>
</html>

1. H5本地存储二
2. h5 localStorage本地存储
3. h5的本地存储
4. H5本地存储一
5. H5的本地存储
6. h5本地存储storage
7. H5本地存储（转）
8. H5中的本地存储
9. H5本地储存Web Storage
10. 关于HTML5本地缓存技术LocalStorage 本地存储和 SessionStorage
更多相关文章...
• XML 相关技术 - XML 教程
• Hibernate的快照技术 - Hibernate教程
• 三篇文章了解 TiDB 技术内幕——说存储
• Docker容器实战(一) - 封神Server端技术