H5学习之路之Web存储解决方案

何处锦绣不灰堆

发布于 2020-05-29 09:56:15

6550

发布于 2020-05-29 09:56:15

我们所说的H5的存储方案指的是客户端的数据存储，这点需要明白，那么在这个之前有么有可用的存储方案呢？当然是有的，之前一直用的CooKie，如果有人看过我之前写的关于客户端存储的文章，这里就很好理解了，我之前说过cookie的弊端和优势。那么今天我们说的是H5才提出的存储方案：localStorage和sessionStorage

首先说一下为什么需要这个东西，为什么之前已经有了cookie但是H5的时候却在客户端存储这块重新定义了这两部分呢？我们都知道，客户端和服务器之间的交互一般是请求发送过去，然后服务器端将数据传递回来，这是常规的一种处理办法，但是其实我们知道，很多的时候，客户端发送的请求很多是重复的，或者是请求的数据量不大，这个时候我们选择将数据暂存在cookie这里，登录的时候的常规做法，那么cookie的存储只有4K，导致的是用户只能请求小的数据的时候才可以，那么既然在不影响性能的情况下，怎么可以尽可能的将更多的数据存放在客户端称为了一种思路和潮流，这样的做法结果是用户体验会更好，因为毕竟速度会快很多，这是一点，另外，服务器的压力会变的很小。说了那么多的废话，只是为了说明今天文章的重要性。

我们先说一下怎么用：

首先是基于js实现的，那么我们的代码肯定是写在js里面的。

我在之前也具体的写过例子：localstore例子，今天简单的再写一下，用官方的例子就行：

<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
    // Store
    localStorage.setItem("lastname", "Gates");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
</script>
</body>
</html>

这里出现了两个基本的用法，也是我们最常用的

localStorage.setItem("key","value")      //前面是key也就是您自己起的名字，后面的是需要的数据

localStorage.getItem("key")              //需要的时候输入key就可以拿到对应的数据

这里需要说一下他的特性：

没有时间限制和刷新次数的限制，但是有浏览器的限制（也就是说他也是遵循同源策略的）

这里我们举个例子说明一下：

<!DOCTYPE HTML>
<html>
	<meta charset="UTF-8"/>
<body>
<script type="text/javascript">
	if (localStorage.pagecount)
		{
		localStorage.pagecount=Number(localStorage.pagecount) +1;
		}
	else
		{
		localStorage.pagecount=1;
		}
	document.write("Visits: " + localStorage.pagecount + " time(s).");
	</script> 
	<p>刷新页面会看到计数器在增长。</p>
	<p>请关闭浏览器窗口，然后再试一次，计数器会继续计数。</p>
</body>
</html>

（源码摘自W3cshool）

我们不换浏览器我不停刷新效果是这样的：

我关闭浏览器重新打开还是继续计数的，那么说明浏览器只要不变就是没有问题的。

当我们换一个浏览器的时候效果是这样的：

很明显只要换浏览器就重置了，那么这里其实我们也可以猜测它的原理了，其实还是基于cookie实现的，根据浏览器的缓存实现的客户端存储的效果。

ok，到这里基本上正常使用这个是没有问题了，那么有的人说了，这个做登录是没有问题，用户刷新页面也是对的，但是按照这个说法，用户就是注销了，退出了，是不是重新进入还是会有自己的信息，那岂不是很不安全，也不是常规的做法啊，对的，所以我们下面说一下，怎么清除本地的数据，有的人注销了，信息可想而知肯定是应该消失的，怎么清除呢？

localStorage.clear;

清除页面的所有内容：

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);   //源码摘自谢灿勇的博客园

支持的版本是：

（图片摘自谢灿勇的博客园）

判断浏览器是不是支持localstorage：

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务 
        }                 //源码摘自谢灿勇的博客园

localStorage写入的三种写法：

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

读取的写法：

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);
        }

删除某个键值数据：

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

最后是如果我们将json数据存放到localstorage里面的时候，我们知道，localstorage会将数据自动转化为String类型，我们需要做的是JSON.stringify()将json数据转为jsonString类型

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

例子二：

var obj = { name:'Jim' };
var str = JSON.stringify(obj);
//存入
sessionStorage.obj = str;

//读取
str = sessionStorage.obj;
//重新转换为对象
obj = JSON.parse(str);

之后再将数据jsonString转为json对象

var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

最后我们简单的说一下他的局限性，毕竟一个东西出来了，肯定不是说只有优势没有劣势的，它的劣势是以下几个方面：

1、IE8以下的版本不支持

2、目前基本上存在的浏览器都是将存储的数据作为String类型，所以上面我也说了，如果是json的话，就需要转化一下了。

3、浏览器的隐私模式下是不可使用的

4、它的存储空间是变得很大，大概5M左右，那么如果什么我们都存在页面上的话，其实我们是不推荐这样使用的，这样导致的结果是页面变得很卡。

总结写法：

localStorage是Storage类型的实例。有以下的几种方法：

①clear（）：删除所有值。

②getItem（name）：根据指定的名字name获取对应的值

③key(index)：在指定的数字位置获取该位置的名字。

④removeItem（name）：删除由name指定的名值对

⑤setItem(name,value)：为指定名字设置一个对应的值

下面我们介绍sessionstorage

用法是一样，区别在于他是只要关闭浏览器就是清除数据。

总结特点：

1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)

2) 单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。

3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。

4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。

5) 存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。