h5 本地存储和读取信息

参考:http://killtyz.com$(document).ready(function () {
  $(‘#add-input‘).focus();
  $(‘#add-input‘).bind(‘keypress‘,function(event){
    var value = $(this).val();
    if( event.keyCode == "13" && value ) {
      var time = (new Date()).getTime();
      addItem(time, value, false);
      store(time, value, false);
      $(this).val(‘‘);
    }
  });
  $(‘#list‘).click( function(event){
    var target = $(event.target);
    if (target.hasClass(‘delete‘)) {
      target.parents(‘.list-group-item‘).remove();
      localStorage.removeItem(target.parents(‘.list-group-item‘).attr(‘data-time‘));
      return false;
    }
    if (!target.hasClass(‘list-group-item‘)) {
      target = $(target).parents(‘.list-group-item‘);
    }
    var check = target.children(‘.check‘).not(‘.checked‘);
    if (check.length) {
      changeStatus(target.attr(‘data-time‘), true);
      check.addClass(‘checked‘);
      check.next(‘.value‘).addClass(‘checked‘);
      check.next(‘.value‘).next(‘.delete‘).show();
    } else{
      changeStatus(target.attr(‘data-time‘), false);
      target.children(‘.check.checked‘).removeClass(‘checked‘);
      target.children(‘.value.checked‘).removeClass(‘checked‘);
      target.children(‘.delete‘).hide();
    }
    return false;
  });
  store(0, ‘KillTYZ 基础 Todo-List 功能实现‘, true);
  store(1, ‘浏览器本地存储 功能实现,请大胆刷新页面!‘, true);
  for(x in localStorage) {
    var obj = JSON.parse(localStorage.getItem(x));
    addItem(obj.time, obj.value, obj.checked);
  }
});

function store(time, value, checked) {
  localStorage.setItem(time, stringify(time, value, checked));
}
function changeStatus(time, checked) {
  var obj = JSON.parse(localStorage.getItem(time));
  obj.checked = checked ? true : false;
  localStorage.setItem(time, JSON.stringify(obj));
}
function stringify(time,value,checked) {
  var obj = new Object;
  obj.time = time;
  obj.value = value;
  obj.checked = checked;
  return JSON.stringify(obj);
}
function addItem(time, value, checked) {
  var node = checked ? ‘<a href="#" class="list-group-item" data-time="‘+time+‘"><span class="check checked"></span><span class="value checked">‘+value+‘</span><span class="delete glyphicon glyphicon-trash"></span></a>‘ : ‘<a href="#" class="list-group-item" data-time="‘+time+‘"><span class="check"></span><span class="value">‘+value+‘</span><span class="delete glyphicon glyphicon-trash" style="display: none;"></span></a>‘;
  $(‘#list‘).prepend(node);
}
时间: 2024-10-09 01:11:48

h5 本地存储和读取信息的相关文章

h5 本地存储

H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多,请耐心阅读. 一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过Cookie,没关系,看了这篇文章照样轻松玩转Web Storage.首先,学习Web

H5本地存储(转)

H5本地存储 一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据,复杂的数据就更别扯了. 下面是Cookie的限制: 关闭浏览器再打开可读到 1, 大多数浏览器支持最大为 4096 字节的 Cookie. 2, 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量.大多数浏览器只允许每

浏览器相关--H5本地存储

这一系列主要研究一下浏览器底层的一些东西,包括协议.存储.底层变量.部分API等. 今天首先介绍一下浏览器底层存储技术. 浏览器存储主要包括一下几个部分1. cookie2. localStorage3. sessionStorage4. indexDB5. websql6. window变量7. flash cookie 下面具体说一下,虽然也没特别具体... 1.cookie这个存储用了很久了,而且也是以前大多网站十分喜欢的存储站点.但是也很容易被清除.同时cookie会在每一次通信过程中传

H5本地存储一

localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同意可以使用,关闭浏览器之后数据就会消失. HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStora

H5本地存储sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储.当用户关闭浏览器窗口后,数据立马会被删除.(特别提示:新建一个标签页面以后,即使跟前一个页面的地址相同,新建标签页面也获取不到前一个页面中获取或者设置的sessionStorage) localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的

h5本地存储storage

storage本地存储,似乎有点想起cookie,的确用法也类似于cookie.但是storage较cookie有不少好处: 存储量大:在客户端完成,不会请求客户端: storage分为sessionStorage和localStorage. 1.sessionStorage  临时存储,当页面关闭的时候,本地存储也就消失.并且sessionStorage的数据是不会共享的. 2.localStorage 永久删除,可以手动删除数据,数据是共享的. storage下有以下api: window.

H5本地存储

他们可以存储:  数组  json数据  图片  脚本  样式文件  : 客户端的存储的两个: 1.localStorage  没时间限制的数据存储() 方法有:.localStrage.getItem();localStrage.setItem();removeItem();localStrage.key()从0开始;.localStrage,clear(); 用它来存储图片需要通过一层canvas,大小和图片一致,渲染到canvas中,利用canvas的toDateURL()的方法存储到本地

H5本地存储二

众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=devic

H5本地储存Web Storage

一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了Cookie只能存储一些ID之类的标识符等简单的数据. 下面是Cookie的限制: 大多数浏览器支持最大为 4096 字节的 Cookie.    浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量.大多数浏览器只允许每个站点存储 20 个Cookie:如果试图存储更多 Cookie,则最