zoukankan      html  css  js  c++  java
  • js本地缓存的几种方法

    一.首先讲讲使用缓存的好处:

    (1).当页面渲染的数据过多时,为了减轻对内存的占用,对初次接收且会用到的数据进行本地缓存,是有着大好处的.

    (2).受网速等各种因素的影响,当渲染数据过多时,若存在频繁的切换页面,用户体验效果不佳。

    二.常见的本地缓存方式

    1.利用storage来对数据进行存储(sessionStorage、localStorage)

    a.sessionStorage

    临时的会话存储,只要当前的会话窗口未关闭,存储的信息就不会丢失,即便刷新了页面或者在编辑器中更改了代码,存储的会话信息也不会丢失。

    用法:详情可见另一随笔:https://www.cnblogs.com/liangye/p/13430428.html

    b.localStorage

    是一种如果你不主动去清除,会一直将数据存储在客户端的储存方式,即使关闭了浏览器,下次打开的时候仍然可以看到之前存储的未主动清除的数据(即便是

    杀毒软件或者浏览器自带的清除功能,也不能将localStorage存储的数据清除掉).

    用法:和sessionStorgae一致

    注意:storage存储的数据只能是字符串类型,其他类型的数据需做类型转换

    storage直接属于顶层对象window.

    2.cookie

    cookie属于较老且最常见用的最多的技术了,cookie的优点很多,用起来也比较方便

    但是缺点也很多:

    cookie兼容所有的浏览器,但其存储的数据是有大小限制的,一般同源是4kb;

    cookie本地存储的数据会被发送到服务器(所以建议在服务器环境下使用cookie);

    跨域访问问题;浪费带宽等等;

    然:最近在使用本地cookie缓存时发现chrome竟然不支持js本地操作cookie,其他市面上的主流浏览器基本都支持

    这也告诉了我们:在使用cookie前,先确认浏览器支不支持cookie先!!!

    检查当前浏览器是否支持或者禁用了cookie,可用以下js代码:

    View Code

    可见chrome:

    在js的脚本中,cookie实际上是document的一个字符属性,当你读取cookie的值时,得到的是一个字符串,里面的是当前web存放的所有的cookie的name,value,除此之外,

    每一个cookie除了有name,value,还有其他四个属性:expires过期时间,path路径,domain域以及secure安全等。

     cookie中存储的数据,如果没有设置有效期的话,浏览器关闭的时候就会被清空(并非关系选项卡)

    cookie的区分是以域名的方式。

    cookie的用法:以键值对的方式来存储数据(key:value形式),一个域名下能存储的cookie个数是不同的,具体的看浏览器的支持性了

    当一个域名下有多个cookie时,输出document.cookie时输出的是当前域名下的所有cookie,cookie之间以分号加空格的形式隔开

    存储格式:document.cookie="name=<value>[;expires=<date>][;domain=<domain>][;secrue]"

    普通的存储数据如下: 

        document.cookie = "id=18";
        document.cookie = "name=liangye";
        alert(document.cookie); //id=18; name=liangye 由于没有设置有效期expires,浏览器关闭后会自动来清理cookie(并非关闭标签)

     js中如果用cookie来存储数据的话,建议是自己写封装好的函数来简化美化下代码。之后会单独写篇关于cookie的基本操作随笔。

    已写,详情可见:https://www.cnblogs.com/liangye/p/13437294.html

    三.cookie和storage的区别

    1.cookie兼容所有的浏览器(本地cookie谷歌不支持),storage不支持IE6~8;

    2.二者对存储的内容均有大小限制,前者同源情况写一般不能存储4kb的内容,后者同源一般能存储只能存储5MB的数据

    3.cookie有过期时间,localStorage是永久存储(如果你不手动去删除的话)

    4.一些浏览器处于安全的角度可能会禁用cookie,但无法禁用localStorage

    实际项目中本地缓存都能来存储什么?

    cookie:记住用户名密码以便下次自动登录等等:当用户登录成功后,存储用户的部分信息,便可以在项目的任何页面知道当前的用户是谁了。

    storage:存储一些不容易过期的数据(如从api接口中接收的用于渲染页面的数据),在存储时一般加入一个存储时间(time:Date.now()),以便在下次

    刷新页面的时候判断存储的事件有没有超过预定的时间;也可以用来存储一些页面的源代码,比如css样式或者html等等(有必要的时候需要来结合前台的数据);

    注意:本地存储一般是明文存储,对于重要的信息不要直接存储在本地,如果非要存储的话,记得要对存储的信息进行加密。

    加密方法:

    a.可逆转加密(一般都是自己来设置自规则)

    b.不可逆转加密:(一般都是基于MD5来进行加密,可能会把MD5加密后的数据二次加密)

    • 想要了解加密的可参考这两个入门链接:https://www.jianshu.com/p/650a6d29c134;https://www.jianshu.com/p/c256ffba7c62
  • 相关阅读:
    webpack基础
    LeetCode232. 用栈实现队列做题笔记
    mysql 时间加减一个月
    leetcode 1381. 设计一个支持增量操作的栈 思路与算法
    LeetCode 141. 环形链表 做题笔记
    leetcode 707. 设计链表 做题笔记
    leetcode 876. 链表的中间结点 做题笔记
    leetcode 143. 重排链表 做题笔记
    leetcode 1365. 有多少小于当前数字的数字 做题笔记
    LeetCode1360. 日期之间隔几天 做题笔记
  • 原文地址:https://www.cnblogs.com/Fooo/p/15497109.html
Copyright © 2011-2022 走看看