网络之存储(cookie webStorage )

cookie 存储数据的功能已经很难满足开发所需,逐渐被 WebStorage、IndexedDB 所取代
cookie详情见cookie

①LocalStorage
保存的数据长期存在(特点:持久),下一次访问该网站的时候,网页可以直接读取以前保存的数据。仅在客户端使用,不和服务器进行通信。
可以作为浏览器本地缓存方案。用来提升网页首屏渲染速度(根据第一次返回,将一些不变得信息直接存储在本地)

存入数据:locoalStorage.setItem("key","value");
读取数据:locoalStorage.getItem("key");

<body>
 <div id="name"></div> 
 <div id="gender"></div> 
 <script> 
 var name = localStorage.getItem("name"); 
 var gender = localStorage.getItem("gender"); 
 document.getElementById("name").innerHTML = name;
 document.getElementById("gender").innerHTML = gender;
  </script> 
  </body>

△因为他的特点是持久,所以用它来存储一些内容稳定的资源,比如图片内容丰富的电商网站存储图片字符串。

②sessionStorage

sessionStorage保存的数据用于浏览器的一次会话,会话结束的时候(窗口关闭的时候),数据被清空;他的特点:即使是相同域名下的两个页面,只要他们不在同一个浏览器窗口中打开,他们的sessionStorage就无法共享;localStorage在所有窗口中是共享的,cookie也是在所有同源窗口中共享。除了保存期限的长短不同,SessionStorge的属性方法和localStorage的完全一样。

sassionStorage的特点:会话级别的浏览器存储,5M左右,仅在客户端使用,不和服务端进行通信,接口封装良好。

所以sessionStorage可以有效的对表单信息进行维护,比如刷新的时候,表单信息不丢失。只适用于当前会话,存储生命周期和他同步的当前级别的会话,当你开启新会话的时候,他也需要相应的更新或释放。

sessionStorage 和localStorage的区别:

同:都保存在浏览器端且都遵循同源策略。
异:生命周期与作用域不同。

作用域:localStorage只要在相同的协议域名端口号下,就能够读取或者修改同一份localStorage数据。sessionStorage比localStorage严苛,还必须在同一个窗口下。
生命周期:localStorage是持久化的本地存储,存储在里面的数据除非手动删除否则不会过期。sessionStorage是临时性的本地存储,会话级别存储,会话结束存储内容释放。

webStorage
键值对形式进行存储,只能存储字符串,想要得到对象就要对字符串进行解析,只能存储少量的简单数据。

④IndexedDB
低级Api,客户端存储大量结构化数据。引用索引实现对数据的高能搜索,是一个运行在浏览器上的非关系型的数据库。没有存储上限,不仅可以存储字符串,还可以存储二进制数据。

特点:键值对存储。异步(localStorage的操作是同步的)异步是为了防止大量数据读写,拖慢网页。支持事务(只要有一步失败,整个失误就取消,数据库回滚到事务发生之前的状态,不存在只写一部分数据的情况)。同源限制,每一个数据库对应创建他的域名,网页只能访问同源下的数据库。存储空间大。支持二进制存储。

他的操作是请求响应模式:

建立打开 IndexedDB ----window.indexedDB.open("testDB")
这条指令并不会返回一个 DB 对象的句柄,我们得到的是一个 IDBOpenDBRequest 对象,
而我们希望得到的 DB 对象在其 result 属性中 除了 result,IDBOpenDBRequest 接口定义了几个重要属性:
 onerror: 请求失败的回调函数句柄 onsuccess:请求成功的回调函数句柄 onupgradeneeded:请求数据库版本
 变化句柄
<script> 
    function openDB(name) { 
    var request = window.indexedDB.open(name); //建立打开 
    IndexedDB request.onerror = function (e) { 
    console.log("open indexdb error"); 
    };
    request.onsuccess = function (e) {
     myDB.db = e.target.result; //这是一个 IDBDatabase 对象,这就是 IndexedDB 对象
     console.log(myDB.db); //此处就可以获取到 db 实例 };
     }
     var myDB = { name: "testDB", version: "1", db: null };
     openDB(myDB.name);
      </script>

总结:
Web Storage 是 HTML5 专门为浏览器存储而提供的数据存储机制,不与 服务端发生通信 IndexedDB 用于客户端存储大量结构化数据

你可能感兴趣的:(前端知识点)