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")

补充：web前端 , HTML 5 ,

上一个：HTML5 移动设备页面布局 - 1
下一个：html5各种页面切换效果和模态对话框