-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added example of working with local and session storage
- Loading branch information
1 parent
110db4c
commit 51d871d
Showing
2 changed files
with
113 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| /* | ||
| * using the local storage api in javascript | ||
| * local storage stays until you clear it out yourself | ||
| * storage is there until browser is closed. | ||
| */ | ||
|
|
||
| // set local storage item. | ||
| //localStorage.setItem('name', 'Chad'); | ||
| //localStorage.setItem('age', '28'); | ||
|
|
||
| // set session storage item. | ||
| //sessionStorage.setItem('name', 'John'); | ||
|
|
||
| // remove from storage | ||
| //localStorage.removeItem('name'); | ||
|
|
||
| // get from storage | ||
| // let name = localStorage.getItem('name'); | ||
| // let age = localStorage.getItem('age'); | ||
| // console.log(name); | ||
| // console.log(age); | ||
|
|
||
| // // clear the storage | ||
| // localStorage.clear(); | ||
|
|
||
| var form = document.querySelector('form'); | ||
| form.addEventListener('submit', function(e){ | ||
| e.preventDefault(); | ||
| const task = document.getElementById('task').value; | ||
| let currentTasks = []; | ||
|
|
||
| if(localStorage.getItem('tasks') !== null){ | ||
| currentTasks = JSON.parse(localStorage.getItem('tasks')); | ||
| } | ||
| currentTasks.push(task) | ||
| localStorage.setItem('tasks', JSON.stringify(currentTasks)); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> | ||
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" | ||
| crossorigin="anonymous"> | ||
| <title>Task List</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col s12"> | ||
| <div id="main" class="card"> | ||
| <div class="card-content"> | ||
| <span class="card-title">Task List</span> | ||
| <div class="row"> | ||
| <form id="task-form"> | ||
| <div class="input-field col s12"> | ||
| <input type="text" name="task" id="task" value="Walk the dog"> | ||
| <label for="task">New Task</label> | ||
| </div> | ||
| </div> | ||
| <input type="submit" value="Add Task" class="btn"> | ||
| </form> | ||
| </div> | ||
| <div class="card-action"> | ||
| <h5 id="task-title">Tasks</h5> | ||
| <ul class="collection"> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| <li class="collection-item"> | ||
| List Item | ||
| <a href="#" class="delete-item secondary-content"> | ||
| <i class="fa fa-remove"></i> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <a class="clear-tasks btn black" href="">Clear Tasks</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> | ||
| <script src="app.js"></script> | ||
| </body> | ||
|
|
||
| </html> |