DumpYard (A Recycle Bin for webpages)

Introduction

DumpYard JQuery plug-in is like a recycle bin for web pages, fully written in JQuery and advanced JavaScript. This free plug-in is released under the MIT license. Have fun with it. :)

What Can It Do?

This will store the values of input DOM elements on the event set by developer like on focus out.

• All information is stored at browser local storage (i.e. HTML LocalStorage)
• It will help the user to retrieve the input data that she/he has used in the past
• User will not lose information even if she/he closes the browser
• It can be a best helper for application tester to track the testing inputs
• It will help user to go back and see any information they have provided in the past.

Using the Code

Using this plug-in is so easy. Just include the JavaScript file (jquery.dumpYard.js) and you have to write a single line of jquery code (i.e,. jQuery('body').setDumpYard();) in your document ready event. we need jquery library as it uses jquery.

Make sure you have placed all required images and CSS. All these files are available on github at https://github.com/AkshyaDash/DumpYard.

This will show a mouse button on the right top corner of your page. When you click that, a floating box will appear with two buttons on top.

If you have made any changes in any input field of your webpage, then go and just click that field. It will show you the change history of that field on that floating box. It shows date time and the value of the field at that time.

If you want to restore the value of that field, then just click the restore button at the far right end of the date time and value shown.

Field that Gets Stored

• TextBox
• TextArea
• Check Box
• Radio button
• File Upload
• Dropdown List

    <script src="jquery-1.7.1.js"></script>
    <script src="jquery-1.7.1.min.js"></script>
    <script src="jquery.dumpYard.js"></script>
    <link rel="stylesheet" type="text/css" href="../DumpYard.css" />

    <script type="text/javascript">
           
  $(document).ready(function () {     
<pre lang="C++">      jQuery('body').setDumpYard();// this will initiate the required methods and classes 
        });

    </script>

How to use?

The above code will add a mouse button to the right top corner of web page

If you click that mouse image, the dumpYard box will be shown with two buttons.

If you have already made any changes in that input fields and want to see the history. then simply click on that input field. The change history will be shown as a list on the dumpyard box. each item will show the date time and the value at that time.

If you want to restore any value then just click the restore button ( indicated with a small arrow in the below image), this will restore the value(as shown).

User can delete all history by clicking the big delete button on that dumpyard box.

Points of Interest

I got a thought and implemented that in jquery so that anyone can use it. This plugin will be helpful for users as well as testers. It just uses HTML local storage so it will only work on the browser that supports HTML local storage. Don't worry, most of the browsers support it.

I did not find any plugin that works like this.