当地存储——Cookie与Web Storage

Cookie

cookie是客户端用来存储数据的,它既能够在客户端设置也能够在服务器端设置。cookie会追随恣意HTTP要求一同发送

Web Storage

html5范例中的Web Storage包含了两种存储体式格局:sessionStoragelocalStorage
sessionStorage用于当地存储一个会话中的数据,这些数据只要在同一个会话中的页面才接见而且当会话完毕后数据也随之烧毁。因而sessionStorage仅仅是会话级别的存储
localStorage用于耐久化的当地存储,除非主动删除数据,不然数据是永久不会逾期的

区分

Web StorageCookie类似都是客户端用来存储数据的,区分是它是为了更大容量存储设想的
Cookie的大小是受限的,最多只能存储4KB的数据;而且每次你要求一个新的页面的时刻,Cookie都邑被发送过去,如许无形中浪费了带宽;再有就是不安全,很轻易被阻拦者截取举行改动
Web Storage具有setItemgetItemremoveItemclear等要领,不像cookie须要本身封装setCookiegetCookie等要领
然则Cookie也是不能够或缺的:Cookie的作用是与服务器举行交互,作为HTTP范例的一部分而存在 ,而Web Storage仅仅是为了在当地存储数据而生

操纵要领

  1. setItem

    sessionStorage.setItem("name","leoyaojy");
    localStorage.setItem("website","luckyw.cn");
  2. getItem

    sessionStorage.getItem("name");        //leoyaojy
    localStorage.getItem("website");    //luckyw.cn
  3. removeItem

    sessionStorage.removeItem("name");
    localStorage.removeItem("website");
  4. clear

    sessionStorage.clear();
    localStorage.clear();
  5. 其他操纵要领:点操纵[]

    sessionStorage.name = "leoyaojy";
    console.log(sessionStorage["name"]);
    
    localStorage["website"] = "luckyw.cn";
    console.log(localStorage.website);
  6. key()length遍历数据

    for (var i=0, len = localStorage.length; i<len; i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        console.log(key + "=" + value);
    }
    原文作者:luckyw
    原文地址: https://segmentfault.com/a/1190000009275825
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞