html5 自动缓存,Html5的缓存操作

缓存问题一直是我们在日常开发中需要特别关注的事情。

在日常的开发中，做好数据的缓存能使我们的程序执行效率更高，并且避免了对服务器的重复请求，减轻了服务器的负担，也加快了用户访问的速度，那在各种前端技术中是如何实现数据的缓存的呢？今天我们就来学习一下h5中的缓存技术吧

在html中，大家最熟悉的应该就是我们之前一直在使用的cookie了，那到底什么是cookie呢？

cookie其实就是存储在计算机中的用来存储访问者的变量，当我们访问某个网页时，就会从cookie中取出存储的用户信息显示类似“XXXX(用户名)，欢迎回来！”等类似的信息。

但是cookie有明显的缺陷：

存储的大小限制，我们访问同源的网站时存储的数据可多可少，但是cookie的存储限制仅为4k，这就对我们的日常使用或者开发造成了一些麻烦。

cookie还有一个特征，就是无论我们访问网页请求数据的同时是否需要使用cookie中的数据，都会在http请求中携带上我们的cookie，因此cookie只适合用来保存很小的数据，比如登录时间、会话标识等。

而今天我们要探讨的是在h5中新增的专注于解决缓存问题的API，名为Web Storage(以下简称Storage)。

而Storage恰好弥补了cookie以上我们提到的缺陷：

针对于存储的限制，storage增大了存储的容量至5M或是更大。

Storage则在请求时不会自动的将数据发送至服务器，只会在本地存储。

此外还有一点区别就是cookie存储数据有路径的概念，我们可以限制cookie只属于某个路径下。

关于Storage,开发者将其分为两种情况,一种是localStorage,一种是sessionStorage。

1.sessionStorage

session(会话)相信大家都不陌生，在多种语言中都出现过，例如php中的超全局变量session数组，例如iOS中取代NSURLConnect的NSURLSession等等。

而在h5中的sessionStorage则代表的是会话中的数据缓存，说明白一点就是在同源同窗口中始终存在的数据。也就是说如果这个浏览器窗口没有关闭，就算是刷新了，进入了其他的同源页面，数据仍然存在。

而在窗口关闭之后，甚至是同时独立打开一浏览器访问同一页面，sessionStorage中的数据也是为空的，一次我们可以将sessionStorage归类于会话级别的缓存。

好了说了这么多我们来看一下有关sessionStorage使用的代码吧：

首先创建一个sessionStorage的变量，如下:

var storage = window.sessionStorage;

假如我们需要储存用户的账号名称，密码，性别，有三种方法：

第一种

storage["username"] = "Ryan";

第二种

storage.password = "Jack";

第三种 这种方法有两个参数，第一个参数就是我们要存储的字段名，第个参数就是我们对应的信息。

storage.setItem('gender','man');

//接着我们打印一下结果如何

console.log(storage);

是不是已经存储进去了？

我们将浏览器关闭，并将代码更改如下，运行

var storage = window.sessionStorage; console.log(storage);

我们刚才所存储的数据全部都没有了。

2.localStorage

接下来我们看localStorage，localStorage单单作为本地缓存，并不会收到浏览器窗口的影响，既然我们将缓存数据的原网页关闭，再次打开同源的网页，我们存储在localStorage中的数据依然存在。

例：

我们和sessionStorage做同样的操作，存储三个属性，并且打印。

var storage = window.localStorage;

第一种

storage["username"] = "Ryan";

第二种

storage.password = "Jack";

第三种

storage.setItem('gener','man'); console.log(storage);

结果如下图所示：

和sessionStorage不同的是我们将浏览器关闭，执行以下代码：

//我们和sessionStorage做同样的操作，存储三个属性，并且打印。

var storage = window.localStorage;

第一种

storage["username"] = "Ryan";

第二种

storage.password = "Jack";

第三种

storage.setItem('gener','man');

console.log(storage);

结果如下图所示：

我们之前存储的数据依然存在。

那sessionStorage和localStorage的主要区别就体现出来了:

sessionStorage的数据存储会因为浏览器窗口的关闭清空，而localStorage只要不做清空的操作，打开同源的网站时会永久存在。

那该怎么清楚storage中存储的信息呢？

//清空storage删除缓存的信息

storage.clear();

//删除storage中某条信息

storage.removeItem("username");

//修改某条信息的操作就是给这个属性重新复制：

//修改信息

storage.password = "Bruce";

执行以上的代码就可以啦~

cf1b9d16fdfaaf51965f931e885494eef11f7ad6.jpg

缓存问题一直是我们在日常开发中需要特别关注的事情。

在日常的开发中，做好数据的缓存能使我们的程序执行效率更高，并且避免了对服务器的重复请求，减轻了服务器的负担，也加快了用户访问的速度，那在各种前端技术中是如何实现数据的缓存的呢？今天我们就来学习一下h5中的缓存技术吧

在html中，大家最熟悉的应该就是我们之前一直在使用的cookie了，那到底什么是cookie呢？

cookie其实就是存储在计算机中的用来存储访问者的变量，当我们访问某个网页时，就会从cookie中取出存储的用户信息显示类似“XXXX(用户名)，欢迎回来！”等类似的信息。

但是cookie有明显的缺陷：

存储的大小限制，我们访问同源的网站时存储的数据可多可少，但是cookie的存储限制仅为4k，这就对我们的日常使用或者开发造成了一些麻烦。

cookie还有一个特征，就是无论我们访问网页请求数据的同时是否需要使用cookie中的数据，都会在http请求中携带上我们的cookie，因此cookie只适合用来保存很小的数据，比如登录时间、会话标识等。

而今天我们要探讨的是在h5中新增的专注于解决缓存问题的API，名为Web Storage(以下简称Storage)。

而Storage恰好弥补了cookie以上我们提到的缺陷：

针对于存储的限制，storage增大了存储的容量至5M或是更大。

Storage则在请求时不会自动的将数据发送至服务器，只会在本地存储。

此外还有一点区别就是cookie存储数据有路径的概念，我们可以限制cookie只属于某个路径下。

关于Storage,开发者将其分为两种情况,一种是localStorage,一种是sessionStorage。

1.sessionStorage

session(会话)相信大家都不陌生，在多种语言中都出现过，例如php中的超全局变量session数组，例如iOS中取代NSURLConnect的NSURLSession等等。

而在h5中的sessionStorage则代表的是会话中的数据缓存，说明白一点就是在同源同窗口中始终存在的数据。也就是说如果这个浏览器窗口没有关闭，就算是刷新了，进入了其他的同源页面，数据仍然存在。

而在窗口关闭之后，甚至是同时独立打开一浏览器访问同一页面，sessionStorage中的数据也是为空的，一次我们可以将sessionStorage归类于会话级别的缓存。

好了说了这么多我们来看一下有关sessionStorage使用的代码吧：

首先创建一个sessionStorage的变量，如下:

var storage = window.sessionStorage;

假如我们需要储存用户的账号名称，密码，性别，有三种方法：

第一种

storage["username"] = "Ryan";

第二种

storage.password = "Jack";

第三种 这种方法有两个参数，第一个参数就是我们要存储的字段名，第个参数就是我们对应的信息。

storage.setItem('gender','man');

//接着我们打印一下结果如何

console.log(storage);

是不是已经存储进去了？

我们将浏览器关闭，并将代码更改如下，运行

var storage = window.sessionStorage; console.log(storage);

我们刚才所存储的数据全部都没有了。

2.localStorage

接下来我们看localStorage，localStorage单单作为本地缓存，并不会收到浏览器窗口的影响，既然我们将缓存数据的原网页关闭，再次打开同源的网页，我们存储在localStorage中的数据依然存在。

例：

我们和sessionStorage做同样的操作，存储三个属性，并且打印。

var storage = window.localStorage;

第一种

storage["username"] = "Ryan";

第二种

storage.password = "Jack";

第三种

storage.setItem('gener','man'); console.log(storage);

结果如下图所示：

和sessionStorage不同的是我们将浏览器关闭，执行以下代码：

//我们和sessionStorage做同样的操作，存储三个属性，并且打印。

var storage = window.localStorage;

第一种

storage["username"] = "Ryan";

第二种

storage.password = "Jack";

第三种

storage.setItem('gener','man');

console.log(storage);

结果如下图所示：

我们之前存储的数据依然存在。

那sessionStorage和localStorage的主要区别就体现出来了:

sessionStorage的数据存储会因为浏览器窗口的关闭清空，而localStorage只要不做清空的操作，打开同源的网站时会永久存在。

那该怎么清楚storage中存储的信息呢？

//清空storage删除缓存的信息

storage.clear();

//删除storage中某条信息

storage.removeItem("username");

//修改某条信息的操作就是给这个属性重新复制：

//修改信息

storage.password = "Bruce";

执行以上的代码就可以啦~

以上就是关于本地缓存Web Storage的一些介绍 欢迎补充~~~

以上就是关于本地缓存Web Storage的一些介绍 欢迎补充~~~