zoukankan      html  css  js  c++  java
  • webStorage的特点

    相比cookie,WebStorage可存储的数据量更大(5mb左右)。

    相比cookie,webStorage同样保存在客户端,但不与服务器进行交互通信,可节省流量。

    WebStorage只能存储字符串类型数据,对于复杂的对象类型数据可以使用ECMAScript提供

    的JSON对象的stringify和parse来处理。

    以上特点是sessinonStorage和localStorage的共同特点。

    他们的不同点在于其生命周期:

    sessionStorage对象存储特定于某个对话的数据,也就是他的生命周期为当前的窗口或标签页。

    他的有效周期和失效范围遵循以下规则:

    1. 当前页面的sessionStorage数据都会在关闭当前页面时销毁。

    2.从当前页面同一标签页跳转到非同源页面后,当前页面的sessionStorage数据会销毁;若是

    打开了新的标签页,则当前页面的sessionStorage数据不会携带保存到新页面中。

    3.打开了一个标签栏访问某页面并设置sessionStorage,然后原地刷新,则该sessionStorage数据依然存在。

    4.打开一个标签栏访问某页面并设置seesionStorage,然后在同一标签中该页面跳转到另一个同源页面,则

    该sessionStorage数据依然存在。

    5.打开一个标签栏访问某页面并设置sessionStorage,然后由该页面打开一个新标签栏跳转到另一个同源页面,则新页面sessionStroage数据与原页面相同,并且此时新页面与旧页面sessionStorage数据相互独立,互不影响。

    6.打开一个标签栏访问某页面并设置sessionStorage,然后手动(并非该页面点击跳转)在新标签页打开一个同原页面或与原页面地址相同的页面,则新页面并不会存在原页面的sessionStorage数据。

    localStorage数据对于同源页面(无论是否是同一标签栏)是共享共用的,并且只要你不去主动删除,它会永久保存在浏览器中。

    WebStorage操作

    sessionStorage和localStorage都属于webStorage,他们拥有相同的操作api.下面以localStorage为例介绍其操作:

    setItem(key,value)

    getItem(key)

    removeItem(key)

    clear()

    length

    key(n)返回第n个key的名称

    let ls = window.localStorage;

    // 保存数据

    ls.setItem("one",2);

    // 取出数据

    ls.getItem("one");

    //删除某个键值对

    ls.removeItem("one");

    //删除全部

    ls.clear();

    //返回本地存储的个数

    ls.length;

    sessionStorage操作将localStorage替换成sessionStorage即可

    4、WebStorage的应用

    只要需要在浏览器存储本地数据的场景都可以使用WebStorage.根据sessionStorage和localStorage生命周期的不同,他们又有各自专门擅长的应用场景:

    sessionStorage适合存储当前会话的相关数据,比如用户登录状态以及用户信息的存储,spa单页面应用页面相关数据的存储。

    localStorage则适合缓存针对同原页面一些长期有效的数据,除非用户手动删除。需要保存长期登录状态的也适合用localStorage.

  • 相关阅读:
    逆变电路技术研究!
    GOOGLE日历(管理自己的日常事务!)
    MATLAB使用的几个小问题(随笔记录下,用作以后参考!)
    ASP.NET截取字符串
    ASP.NET以及JS获取URL和IP地址
    Jvascript 做IE功能按钮,打开、另存为。属性、打印、收藏夹等js按钮
    C# winform 动态添加控件 以及 事件
    VS2008简体中文正式版序列号
    js 获取日期
    ASP.NET读取XML某节点所有数据返回DataTable实例
  • 原文地址:https://www.cnblogs.com/huayang1995/p/14549753.html
Copyright © 2011-2022 走看看