JSinSa 2015 - Progressive Saving Using LocalStorage
-
Upload
daphnecalitz -
Category
Technology
-
view
41 -
download
2
Transcript of JSinSa 2015 - Progressive Saving Using LocalStorage
![Page 1: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/1.jpg)
PROGRESSIVE SAVING USING
LOCALSTORAGE
![Page 2: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/2.jpg)
What is progressive saving?
![Page 3: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/3.jpg)
What should we consider?
◦Data could be invalid
◦Data could be incomplete
![Page 4: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/4.jpg)
Why Do We Want To Progressively Save?
◦User could close browser by accident
◦Internet connection could fail
◦Juggling multiple tasks at one time
◦Loadshedding
![Page 5: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/5.jpg)
Demo Time
![Page 6: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/6.jpg)
What is LocalStorage?
◦Small internal key value store in your browser
◦Stores JSON
![Page 7: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/7.jpg)
Things to remember when using LocalStorage
◦Stores up to 10MB per domain
◦When the user clears her cache, it will also clear LocalStorage
◦Not Recommended when using Private Browsing
![Page 8: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/8.jpg)
LocalStorage Browser Support
◦IE 8+
◦Firefox 3.5+
◦Chrome 4+
◦Safari 4+
◦Opera 11.5+
![Page 9: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/9.jpg)
What should I do if I still need to support old
browsers?◦Cry Softly
◦Use Store.js
◦Use PersistJS
![Page 10: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/10.jpg)
LocalStorage and EmberJS
◦Why EmberJS?
◦What did I have to learn?
◦Tutorial and Versioning Issues
![Page 11: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/11.jpg)
LocalStorage and Other JavaScript Frameworks
◦EmberJS, Ember-Data, ember-localstorage-adapter
![Page 12: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/12.jpg)
![Page 13: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/13.jpg)
![Page 14: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/14.jpg)
◦AngularJS and BreezeJS
![Page 15: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/15.jpg)
◦ReactJS and react-localstorage
![Page 16: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/16.jpg)
◦JavaScript
![Page 17: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/17.jpg)
LocalStorage and the Server
![Page 18: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/18.jpg)
Benefits of Progressive saving using LocalStorage
◦You’ll make your users very happy
◦Ease of Implementation
◦Supported by most browsers
![Page 19: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/19.jpg)
Executable with all JavaScript Frameworks
◦EmberJS, Ember-Data, ember-localstorage-adapter
◦AngularJS/KnockOutJS/BackBoneJS and BreezeJS
◦ReactJS and react-localstorage
◦JavaScript
![Page 20: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/20.jpg)
![Page 21: JSinSa 2015 - Progressive Saving Using LocalStorage](https://reader038.fdocuments.in/reader038/viewer/2022103119/55cdbe45bb61eb005e8b476c/html5/thumbnails/21.jpg)
@DaphneCalitz