【实例】html5中使用localStorage实现简易的便利贴网页

要求

1.     实现长时间(即便是关了浏览器)也能记录数据

2.     让每一条便利贴以对象的方式存储

思路

  • 可以使用html5中的localStorage实现长时间的数据本地存储
  • 使用json中的parse和stringify实现便利条对象的数据化转换
  • 每一个便利条有数据(text)和颜色(color)两个属性
  • 可以使用(new Date()).getTime()来让每一个便利条的key唯一

实现

在线演示





HTML5中用localStorage实现的便利贴网站









效果如图

 【实例】html5中使用localStorage实现简易的便利贴网页_第1张图片

可以改进的地方

1.     showMessage总是要清空原便利贴的数据之后才能显示新的数据出来,可不可以直接获取新加入的便利贴,之后直接appendChild到

    中呢

    2.     这个实例没有删除便利贴的功能


你可能感兴趣的:(Web前端)