• js学习总结----本地存储


    在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全)

    1、JS中的本地存储:

    使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息

    本地存储的方案:

    传统:

      cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取COOKIE的)

      session:把信息存储到服务器上的(服务器存储)

    HTML5:webStorage

      localStorage:永久存储在客户端的本地

      sessionStorage:信息的会话存储,会话窗口存在信息也存在,会话窗口关闭信息就消失了

    2、COOKIE  localStorage sessionStorage

       ->webStorage

      setItem([key],[value]):像客户端的本地存储一条记录,存储的[value]需要是字符串格式的,如果编写的不是字符串,浏览器会默认的转化为字符串然后在进行存储;同源下存储的[key]是不会重复的,如果之前有的话,是把存储的信息值进行修改。如果存储的value是一个对象,需要先使用JSON.stringify()进行转化。

      getItem([key]):获取之前存储的值

      removeItem([key]):移除KEY对应的存储记录

      clear():把当前源下的所有的存储记录都移除掉

      localStorage.length:获取存储的记录条数

      localStorage.key(0):获取索引为0这一项的KEY是什么

      

      localStorage.setItem('age',7);

      localStorage.getItem('age');

      localStorage.removeItem('age');

      localStorage.clear();

      localStorage和sessionStorage的区别

      localStorage属于永久存储在本地,不管是刷新页面还是关掉页面或者关闭浏览器,存储的内容都不会消失,只有我们自己手动的去删除才会消失(不管是杀毒软件还是浏览器自带的清除历史记录功能都不能把localStorage存储的内容清除掉)

      sessionStorage属于临时的会话存储,只要当前的页面不关闭,信息就可以存储下来,但是页面一旦关闭,存储的信息就会自动清除(F5刷新页面只是把当前的DOM结构等进行重新的渲染,会话并没有关闭)

      

      cookie

      document.cookie = 'age = 7'

      cookie和localStorage的区别

      1)、cookie

      cookie存储内容的大小是有限制的,一般同源下只能存储4kb的内容;localStorage存储的内容也有大小限制,一般同源下只能存储5MB

      cookie存储的内容是有过期时间的,而localStorage是永久存储到本地,使用杀毒软件或者浏览器自带的清除垃圾的功能都可能会把存储的cookie给删除掉

      用户可能处于安全的角度禁用cookie(无痕浏览器),但是不能禁止localStorage

      真是项目中的本地存储都使用哪些东西?

      记住用户名密码或者自动登录;用户的部分信息,当用户登录成功后我们会把用户的一些信息记录到本地的cookie中,这样在项目中的任何页面都可以知道当前登录的用户是哪一个了;购物车...(存储少量信息或者是需要浏览器兼容的都需要使用cookie来进行存储)

      2)、localStorage

      在PC端我们可以用其存储 某一个JS或者CSS中的源代码;还可以把一些不需要经常更新的数据存储到本地,存储的时候可以设置一个存储的时间,以后重新刷新页面,看一下时间有没有超过预定的时间,如果已经过时了,我们从新获取最新数据,没超过我们使用本地数据。

      本地存储都是明文存储

      对于重要的信息我们一般不要存储到本地,如果非要存储的话我们需要把存储的信息进行加密

      可逆转加密:加密完成还可以解密回来

      不可逆转加密:MD5 

  • 相关阅读:
    Tomcat服务器原理详解
    junit入门
    lombok
    java 运行指定类的main函数
    席位分配问题——惯例Q值法和d'hondt法的MATLAB程序
    5.2 calendar--通用日期的相关函数(3)
    [笔记]软件体系结构(1)--模式初印象
    hdu 1003
    linux虚拟机上挂载U盘
    Android中Java与web通信
  • 原文地址:https://www.cnblogs.com/diasa-fly/p/7366591.html
Copyright © 2020-2023  润新知