Local Storage is a native JavaScript Web API that makes it easy to store and persist data (as key-value pairs) in the Browser. In this lesson, we'll walk through using window.localStorage to store feedback a user enters into a form (text) so that even if they close and re-open their browser, they won't loose their progress.
 
feedback.js
import inputStorage from '../input-storage/input-storage';

let feedback = {
init() {
inputStorage.restore('userFeedback', '.feedback__textarea');
inputStorage.save('userFeedback', '.feedback__textarea');
}
}; export default feedback;

inputStorage.js

let inputStorage = {
restore(key, inputSelector) {
if(localStorage[key]) {
document.querySelector(inputSelector).value = localStorage[key];
}
}, save(key, inputSelector) {
let inputElement = document.querySelector(inputSelector);
inputElement.addEventListener('input', () => {
localStorage[key] = inputElement.value;
});
}
}; export default inputStorage;

[Javascript] Web APIs: Persisting browser data with window.localStorage的更多相关文章

  1. json 存 window.localStorage.setItem('hideColums',hideArr);

    onColumnSwitch:function(row, $element){ //JSON.parse() var showColumns=$('#table').bootstrapTable('g ...

  2. js-Client-side web APIs

    APIs https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/ 简介: 应用程序接口(API) ...

  3. JavaScript -- 时光流逝(九):Window 对象、Navigator 对象

    JavaScript -- 知识点回顾篇(九):Window 对象.Navigator 对象 1. Window 对象 1.1 Window 对象的属性 (1) closed: 返回窗口是否已被关闭. ...

  4. 前端Web APIs 二

    day04 - Web APIs 学习目标: 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够 ...

  5. 前端Web APIS

    day01 - Web APIs 学习目标: 能够通过ID来获取元素能够通过标签名来获取元素能够通过class来获取元素能够通过选择器来获取元素能够获取body和html元素能够给元素注册事件能够修改 ...

  6. ECMAScript Web APIs node.js

    https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ What falls under the scope of ECMASc ...

  7. Web APIs 基于令牌TOKEN验证的实现

    Web APIs 基于令牌TOKEN验证的实现 概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但 ...

  8. ASP.NET Web APIs 基于令牌TOKEN验证的实现(保存到DB的Token)

    http://www.cnblogs.com/niuww/p/5639637.html 保存到DB的Token 基于.Net Framework 4.0 Web API开发(4):ASP.NET We ...

  9. 《RESTful Web APIs中文版》

    <RESTful Web APIs中文版> 基本信息 原书名:RESTful Web APIs 原出版社: O'Reilly Media 作者: Leonard Richardson    ...

随机推荐

  1. hdu 3395

    KM裸题 每个鱼都认为自己是雄性,而且会攻击它认为是雌性的鱼,每个鱼只能被攻击一次,被攻击后会产卵(个数是给的两条鱼的值的异或运算) #include<string.h> #include ...

  2. web开发小白之路

    今天就来谈谈本人从事web开发的一系列白只又白的经历,本人刚开始是从事ios开发的,由于一系列的变故现在变为了web前端开发,不过说来也奇怪,刚开始接触前端时间可以说是彻底蒙圈,各种选择器,各种适配搞 ...

  3. IE浏览器下a标签嵌套img标签默认带有边框

    最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

  4. XAML 命名空间和命名空间映射

    本主题将介绍大部分 XAML 文件的根元素中存在的 XML/XAML 命名空间 (xmlns) 映射.它还将介绍如何为自定义类型和程序集生成类似的映射. XAML 命名空间如何与代码定义和类型库相关 ...

  5. [c#]asp.net开发微信公众平台(3)微信消息封装及反射赋值

    上一篇已经搭建好整体框架,实现了入口的验证,   验证通过后就交给LookMsgType方法处理,LookMsgType方法主要是对微信发来的不同的消息进行分解,不同的类型交给业务逻辑层不同的方法处理 ...

  6. atoi()、inet_addr()等函数 time.h文件

    1.atoi() 原型:int atoi(const char *nptr); 函数说明:参数nptr字符串,如果第一个非空格字符存在,是数字或者正负号则开始做类型转换,之后检测到非数字(包括结束符 ...

  7. web标准(复习)--8

    今天我们开始学习下拉及多级弹出菜单,包含以下内容和知识点: 带下拉子菜单的导航菜单 绝对定位和浮动的区别和运用 css自适应宽度滑动门菜单 一.带下拉子菜单的导航菜单下拉菜单在一些企业网站应用尤为广泛 ...

  8. javascript学习教程之---如何从一个tab切换到banner幻灯片的转换2

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. libevent入门(1)

    libevent是什么                libevent 库实际上没有更换 select().poll() 或其他机制的基础.而是使用对于每个平台最高效的高性能解决方案在实现外加上一个包 ...

  10. python文件_读取

    1.文件的读取和显示 方法1: f=open(r'G:\2.txt') print f.read() f.close() 方法2: try: t=open(r'G:\2.txt') print t.r ...