前端本地存储的三种方式

前端本地存储的三种方式前端的本地存储,就是将一些数据存储在浏览器本地。这些数据可能是从服务器端获取到的数据,也可能是在多个页面中需要频繁使用到的数据,如:用户的基本信息。一、cookie🏑在h5之前,本地存储的主要方式就是cookie,cookie可以实现少量数据的存储。为什么是少量?因为c

大家好,欢迎来到IT知识分享网。前端本地存储的三种方式"

前端的本地存储,就是将一些数据存储在浏览器本地。这些数据可能是从服务器端获取到的数据,也可能是在多个页面中需要频繁使用到的数据,如:用户的基本信息。


一、cookie 

🏑在 h5 之前,本地存储的主要方式就是 cookie ,cookie可以实现少量数据的存储。为什么是少量?因为 cookie 有 4k 的限制,没办法存储数据量较大的数据。

😗cookie的使用场景:

  1. 用于浏览器和server的通讯
  2. 可设置失效时间,默认是浏览器关闭后失效
  3. 存放数据大小为4K左右
  4. 每次都会携带在HTTP头中,如果使用Cookie保存过多数据会带来性能的问题
  5. .需要程序员自己封装,原生的Cookie接口不友好

🥳cookie的缺点:

除了上面说的只能存储 4k 的数据以外,浏览器在发起请求时,也会将其带在请求头上,污染主domain的同时又增加了用户使用的流量,所以h5 引入了两个新的方式来进行本地存储。

😙cookie的使用:

     (设置) docment.cookie= "a=100; b=200"    //一次只能添加一个, 多余的会被截取

     (读取) document.cookie                   //"a=100" 

     (修改) docment.cookie= "a=101“
     
     (读取) document.cookie                   //"a=101"

二、sessionStorage

🏑sessionStorage 是一个全局对象,数据以键值对的方式进行存储,所以它的使用方式与普通对象非常相似,可以直接通过中括号 sessionStorage[‘key’] 的方式添加和获取数据,也可以通过点语法 sessionStorage.key 的方式进行操作,sessionStorage 也有自己的 api 用于操作数据 

(设置)
 sessionStorage.setItem("key", "value")
 sessionStorage.key="value"
 sessionStorage["name"]="bonly"

 (读取) 
 sessionStorage.getItem("key")
 sessionStorage["name"]
 sessionStorage.name
 
 (删除) 
 sessionStorage.removeItem("name")
 
 (删除所有数据) 
 sessionStorage.clear()

😗sessionStorage  的使用场景:

  1. 仅在当前会话下有效,关闭tab页面或浏览器后被清除
  2. 存放数据大小一般为5MB
  3. 仅在客户端(即浏览器)中保存,不参与和服务器的通信

🥳sessionStorage  的缺点:

sessionStorage 中存储的数据不会被自动随着请求被发送到服务端,可存储的数据大小相比 cookie 来说大了很多,但是每个浏览器都不同,所以没有一个统一的值。其中所存储的数据的生命周期与 session 类似,即只存在于一个会话周期内,当浏览器关闭或标签页关闭时,数据即会被删除(前进和后退并不会影响到数据,因为还在当前的会话中),这就导致了即便是同一个网站,但在不同的标签页和窗口内,也无法共享其中存储的数据。

三、localStorage 

😗localStorage 的使用场景:

  1. 除非被清除,否则永久保存
  2. 存放数据大小一般为5MB
  3. 仅在客户端(即浏览器)中保存,不参与和服务器的通信
  4. 浏览器可以设置是否可以访问数据,如果设置不允许会访问失败
  5. 兼容IE8以上浏览器 6.只能存储字符串类型,需要转成字符串存储

😗localStorage的使用:

(设置) 
 localStorage.setItem("key","value")
 localStorage["name"]="bonly"; 
  localStorage.key="value"; 
  
 (读取)
 localStorage.getItem("key");
 localStorage["name"]; localStorage.key;
 
 (修改)  // 就是相当于给对应的key重新赋值,就会把原来的值覆盖掉
 localStorage.setItem("key","value") 
 
 (移除) 
 localStorage.removeitem('name') 
 delete localStorage["name"]
 delete localStorage.name
 
 (获取所有的key) 
 for(var key in localStorage){ console.log(key); } 
 
 (获取所有的值) 
 localStorage.valueOf()
 
 (清除所有的值) 
 localStorage.clear()
 
 (判断是否具有某个key,hasOwnProperty方法) // 如果存在的话返回true,不存在返回false 
 localStorage.hasOwnProperty("name") 

使用技巧:

  • 先判断浏览器是否支持localStorage,通过if(!window.localStorage) return;
  • 单词太长,不方便书写,可以利用 var storage=window.localStorage;
  • 字符串和原始类型需要通过 JSON.stringfy 转字符串,通过 JSON.parse 转成对象
  • 通过封装方法实现来回转化

四、三种存储方式共同的缺点 

三种存储方式都只能存储字符串类型或者可转为字符串的简单数据,并不适合用来存储复杂的关系型数据,但是 h5 为我们提供了一个新的 api —— Web SQL Database

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/32029.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信