zoukankan      html  css  js  c++  java
  • sessionStorage & localStorage & cookie

    sessionStorage & localStorage & cookie

    概念

    • html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
    • sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
    • localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
    • Cookie指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。

    用途

    • sessionStorage
    • localStorage
    • Cookie: 服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息,以判断在HTTP传输中的状态。Cookies最典型的应用是判定注册用户是否已经登录网站,用户可能会得到提示,是否在下一次进入此网站时保留用户信息以便简化登录手续,这些都是Cookies的功用。另一个重要应用场合是“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品,这些信息都会写入Cookies,以便在最后付款时提取信息。

    特点

    • 内存大小 :
      • 单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
      • localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
    • 存储位置 : cookie是在客户端保存的方案.而session是在服务端保存的方案.
    • 生命周期 :
      • localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在
      • sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
      • cookie是在客户端保存的方案.而session是在服务端保存的方案.如果cookie不设定时间的话就表视它的生命周期为浏览器会话的期间,只要关闭IE,cookie就消失了这种cookie被称为会话cookie.其一般不保存在硬盘上.而是保存在内存中.如果设置了过期时间.那么浏览器会把cookie保存到硬盘中,再次打IE时会依然有效.直到它的有效期超时;注:存储在硬盘中的cookie可以在不同IE间共享;
    • 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
    • 他们均只能存储字符串类型的对象

    操作

    localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

    存储 setItem

    用途:将value存储到key字段

    用法:.setItem( key, value)

    sessionStorage.setItem("key", "value");
    localStorage.setItem("site", "js8.in");
    
    获取 getItem

    用途:获取指定key本地存储的值

    用法:.getItem(key)

    var value = sessionStorage.getItem("key"); 
    var site = localStorage.getItem("site");
    
    删除 removeItem

    用途:删除指定key本地存储的值

    用法:.removeItem(key)

    sessionStorage.removeItem("key"); 
    localStorage.removeItem("site");
    
    清空 clear

    用途:清除所有的key/value

    用法:.clear()

    sessionStorage.clear(); 
    localStorage.clear();
  • 相关阅读:
    printf()函数不能直接输出string类型
    HDU 6166.Senior Pan()-最短路(Dijkstra添加超源点、超汇点)+二进制划分集合 (2017 Multi-University Training Contest
    计蒜客 17119.Trig Function-切比雪夫多项式+乘法逆元 (2017 ACM-ICPC 亚洲区(西安赛区)网络赛 F)
    POJ 1195.Mobile phones-二维树状数组
    HDU 1541.Stars-一维树状数组(详解)
    ACM中常见错误对应表
    HDU 6112.今夕何夕-蔡勒公式 (2017"百度之星"程序设计大赛
    hdu 2126 Buy the souvenirs 二维01背包方案总数
    codevs 1017 乘积最大 dp
    bzoj 2705: [SDOI2012]Longge的问题 欧拉函数
  • 原文地址:https://www.cnblogs.com/sweetBug/p/5847781.html
Copyright © 2011-2022 走看看