demo采用了vue2.5 + vuex + localStorage + sass + webpack实现的本地储存记事本。兼容PC端及移动端。
在线预览: preview
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
-
事件状态切换
- 添加事件 --> 未完成列表
- 未完成 --> 已完成
- 未完成 --> 已取消
- 已完成 --> 未完成
- 已取消 --> 未完成
-
事件筛选
-
编辑事件
-
删除事件
-
清空所有事件
-
本地化储存事件数据
-
导出/导入数据
事件的保存、状态切换都由vuex管理,当发生相应事件时,提交载荷到vuex,与其中保存的state相比对,符合判断条件的相应state则切换状态。
使用localStorage储存数据,所有状态的事件都由localStorage保存,基本用法:
1). 储存数据:localStorage.setItem(item, value)
2). 获取数据:localStorage.getItem(item)
3). 清除数据:localStorage.removeItem(item)
在编辑数据时,可以根据类型和关键词进行筛选。在返回所有事件的计算属性上,使用过滤器,对判断条件──事件类型type及关键词content进行筛选,返回符合条件的事件。
利用Blob对象创建指定文件并下载。以导出数据为例,它的过程如下:
-
构造Blob对象。new Blob(array, options)。options是可选参数。
- type,默认值为"",代表放入Blob中的内容的MIME类型。
-
创建URL对象指定文件的下载链接,新的URL表示指定File对象或Blob对象
-
利用
<a>
标签进行下载。先生成一个<a>
元素,并为其指定下载链接为blob
,download属性指定文件名,最后click()
事件触发下载。 -
释放URL对象。手动释放之前创建的URL对象,能够最大限度的获得最大性能和内存使用状况。方法为:
window.URL.revokeObjectURL(objectURL)
示例:
const foo = ['Hello']
const blob = new Blob([JSON.stringify(foo)], {type: 'text/plain'})
const filename = `${new Date().valueOf()}.txt`
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = filename
link.click()
window.URL.revokeObjectURL(link.href)