zoukankan      html  css  js  c++  java
  • [Javascript] Web APIs: Persisting browser data with window.localStorage

    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;
  • 相关阅读:
    第二阶段冲刺(一)
    第一冲刺阶段博客检查汇总
    整改方案
    意见
    站立会议(九)
    站立会议八
    我爱淘二次冲刺阶段1
    我爱淘冲刺阶段7
    我爱淘冲刺阶段6
    我爱淘冲刺阶段5
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5164660.html
Copyright © 2011-2022 走看看