码迷,mamicode.com
首页 > 其他好文 > 详细

本地存储和离线缓存

时间:2020-07-17 14:10:24      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:保存   创建   序列化   跨域   自动   index   客户端   就会   session   

前端的存储方式有: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条,最长不能超过40k
  • 在请求头上带着数据安全性差

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)应用场合

  1. 数据比较大的临时保存方案。如在线编辑文章时的自动保存。
  2. 多页面访问共同数据。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、离线缓存

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、本地存储和离线存储有什么不同

本地存储与离线缓存都是为了方便网页的加载,提高用户体验等。
本地存储一般存储的都是数据,而离线缓存一般存储的是网页等。

本地存储和离线缓存

标签:保存   创建   序列化   跨域   自动   index   客户端   就会   session   

原文地址:https://www.cnblogs.com/moutudou/p/8073618.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!