HTML5 本地存儲 localStorage SessionStorage StorageListener- 2

%setion

  %p= "localStorage"

  %aside

    %ul

      %li

        %button.add= "添加資料"

      %li

        %button.get= "擷取資料"

      %li

        %button.remove= "移除資料"

      %li

        %button.click= "清除資料"

      %li

        %button.parse= "解析JSON資料"

    %section.localStorage

pie={};

pie.load = function(func){

  jQuery(function(){

    try{

      func();

    }catch(e){

      console.log("PIE: js加載錯誤 " + e);

    }

  });

}

pie.load ->

  $userData = {

    name:"Sankyu Name",

    account:"sankyu",

    level:1,

    disabled:true

  }

  localStorage.getItem("userData")

  jQuery('.get').on 'click', ->

    $localStorage = jQuery('.localStorage')

    $localStorage.html(localStorage.getItem("userData"))

  jQuery('.add').on 'click', ->

    $localStorage = jQuery('.localStorage')

    localStorage.setItem("userData",JSON.stringify($userData))

    $localStorage.html("增加成功")

  jQuery('.remove').on 'click', ->

    localStorage.removeItem("userData")

    $localStorage = jQuery('.localStorage')

    $localStorage.html("删除成功")

  jQuery('.click').on 'click', ->

    localStorage.clear

    $localStorage = jQuery('.localStorage')

    $localStorage.html("已清除")

  jQuery('.parse').on 'click', ->

    $parse = JSON.parse(localStorage.getItem("userData")).name

    $localStorage = jQuery('.localStorage')

    $localStorage.html($parse)

jQuery(window).on 'load', ->

    window.addEventListener("storage",

      ((e) ->

        console.log(e)

        $storage = jQuery('p .storage')

        $storage.html("删除成功")

      ),true)

    localStorage.clear

    localStorage.setItem("userData","storage demo")

    localStorage.setItem("userData", "storge event demo")

---------------------------------------------------------------------------------------------------------