缓存问题一直是我们在日常开发中需要特别关注的事情。
在日常的开发中，做好数据的缓存能使我们的程序执行效率更高，并且避免了对服务器的重复请求，减轻了服务器的负担，也加快了用户访问的速度，那在各种前端技术中是如何实现数据的缓存的呢？今天我们就来学习一下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的一些介绍 欢迎补充~~~
网友评论