HTML5新增功能2（存储，缓存）

最新推荐文章于 2021-06-15 17:44:24 发布

左岸no001

最新推荐文章于 2021-06-15 17:44:24 发布

阅读量307

点赞数

分类专栏：基础文章标签： HTML

本文链接：https://blog.csdn.net/qq_44927715/article/details/100709659

版权

基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5新增功能2（存储，缓存）

前端的存储方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5离线存储等

1、本地存储

1.cookie
在h5之前，存储主要用的是cookie。cookie会随着每次http请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

1.cookie的存取方法

1.存:赋值（键值对）
document.cookie = “键=值”; //一次只能存一个键值对
2.取：不赋值
var v=document.cookie; //取出字符串
常用操作：
var arr1 = v.split("; ");//分割
JSON.stringify(obj); //对象转换为字符串存入
JSON.parse(str); //JSON字符串转换为对象取出
3.删：（设置存储有效时长为过去时间）
var date = new Date();
date.setDate(date.getDate()+“设置时长”);
document.cookie = “key=value;expires=”+date.toUTCString();

2.cookie的优缺点

优点：可控制过期时间，使其不会长期有效
可扩展、可用性比较好
可加密减少cookie被破解的可能性
缺点：数量和长度有限制，最多20条，最长不能超过4k
在请求头上带着数据安全性差

3.cookie的应用场景

主要应用：购物车、客户端登录

2.localStorage

localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用。
localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同

1.使用方法

localStorage.setItem("key","value");//存储
localStorage.getItems(key);//按key进行取值
localStorage.removeItems(key);//按key单个删除
localStorage.clear();//删除全部数据
localStorage.length;//获得数据的数量
localStorage.valueOf();//获取全部值

2.优缺点

优点：
localStorage拓展了cookie的4k限制
localStorage可以将第一次请求的5M大小数据直接存储到本地，相比于cookie可以节约带宽
localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage
缺点：
需要手动删除，否则长期存在
浏览器大小不一，版本的支持也不一样
localStorage只支持string类型的存储，JSON对象需要转换
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
特点：
同源策略限制、只在本地存储、永久保存、同浏览器共享

3.应用场合

数据比较大的临时保存方案。如在线编辑文章时的自动保存。
多页面访问共同数据。sessionStorage只适用于同一个标签页，localStorage相比而言可以在多个标签页中共享数据。

3.sessionStorage

sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失

1.使用方法

sessionStorage.setItem("key","value");//存储
sessionStorage.getItems(key);//按key进行取值
sessionStorage.removeItems(key);//按key单个删除
sessionStorage.clear();//删除全部数据
sessionStorage.length;//获得数据的数量
sessionStorage.valueOf();//获取全部值

2.特点

同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。
单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据
存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。)。
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

3.应用场合

sessionStorage 非常适合单页应用程序，可以方便在各业务模块进行传值。

4.localStorange与sessionStorage的区别

相同点：
存值都是以键值对形式存在，值也是存入字符串类型（如果是对象，就序列化以后再存入）；
localStorage和sessionStorage使用时使用相同的API；
都是用来存储客户端临时信息的对象；
解决cookie大小4k的问题；解决请求头常带存储信息的问题；解决关系型存储的问题
不同点：
H5的两种存储技术的最大区别就是生命周期。
localStorage是本地存储，存储期限不限；
sessionStorage是会话存储，页面关闭数据就会丢失。

5.web storage和cookie的区别

Web Storage包括localStorange与sessionStorage。它的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

2、离线缓存

Html5 引入了应用程序缓存，这意味着 web 应用可在没有因特网连接时进行访问

0.离线缓存的缓存机制
1:页面的首次加载，获取manifest在内的所有文件，根据manifest文件的内容，该缓存的缓存；
2:第二次加载，先从缓存中取出manifest文件，里面列出的缓存文件，直接从缓存读取，然后去请求网络的manifest和其他文件，若新的mannifest文件版本和旧的一样，则没有变动。若有变动则取出需要缓存的文件放入本地，然后更新本地文件。
3:但是，已经被渲染的页面不会重新刷新，即使服务端更新manifest文件后，客户端的第一次刷新还是上一次的文件，第二次刷新才是更新后的文件，这是离线缓存的机制导致的问题，会有体验上的不足。
4:解决方案：用代码进行手动缓存的刷新解决，调用window.applicationCache.update();进行缓存刷新，window.applicationCache.swapCache()进行重新请求更新的资源进行渲染。

1.为什么要使用离线缓存？
应用程序缓存为应用带来的优势：

离线浏览：用户可在应用离线时使用它们
速度：已缓存资源加载速度块
减少服务器负载：浏览器只从服务器下载更新过的资源
2.Application Cache （Manifest）
1.使用方法：
1> 在html标签添加manifest属性

在页面的html标签中添加manifest属性，属性值为manifest文件的路径。如：

<!DOCTYPE HTML> 
<html manifest="../js/demo.manifest">
        ...
</html>

2> 编写manifest文件

manifest文件是简单的文本文件，它会告知浏览器需要缓存的内容以及不需要缓存的内容。

manifest文件可分为三部分：
(1) CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
(2)NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

(3)FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

简单示例：
CACHE MANIFEST
#version 1.1   /*版本号*/
CACHE:
    html/index.html /*需要缓存的文件*/
NETWORK:
    js/jquery.js /*不需要缓存的文件*/
FALLBACK: 
    html/index.html /*当页面无法访问时的回退页面*/

2.注意事项：
1.浏览器对缓存数据的容量限制可能不太一样
2.如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器会继续加载之前的缓存
3.引用的manifest文件必须和html文件同源，同域
4.浏览器的自动缓存会导致更改了的html文件必须更新版本才能更新页面
5.更新版本后，必须刷新一次才会启动新版本
6.当manifest文件发生改变时，资源请求本身也会触发更新

3)离线缓存与传统浏览器缓存区别：
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览

区别：
1、离线缓存是针对整个应用，浏览器缓存是单个文件
2、离线缓存断网了还是可以打开页面，浏览器缓存不行
3、离线缓存可以主动通知浏览器更新资源

3、本地存储和离线存储有什么不同
本地存储与离线缓存都是为了方便网页的加载，提高用户体验等。
本地存储一般存储的都是数据，而离线缓存一般存储的是网页等

左岸no001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增功能2（存储，缓存）

HTML5新增功能2（存储，缓存）前端的存储方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5离线存储等1、本地存储1.cookie在h5之前，存储主要用的是cookie。cookie会随着每次http请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同...
复制链接

扫一扫