0
A Brief Introduction
to localStorage
Shouqiang Gong - @StuPig_me
13年7月19⽇日星期五
API
Read more: localStorage spec
13年7月19⽇日星期五
API
METHOD ARGS RETURNS
setItem string key, string
value
getItem string key string value
removeItem string key
clear
key i...
API
METHOD ARGS RETURNS
setItem string key, string
value
getItem string key string value
removeItem string key
clear
key i...
API
METHOD ARGS RETURNS
setItem string key, string
value
getItem string key string value
removeItem string key
clear
key i...
API
METHOD ARGS RETURNS
setItem string key, string
value
getItem string key string value
removeItem string key
clear
key i...
API
METHOD ARGS RETURNS
setItem string key, string
value
getItem string key string value
removeItem string key
clear
key i...
API
METHOD ARGS RETURNS
setItem string key, string
value
getItem string key string value
removeItem string key
clear
key i...
API
METHOD ARGS RETURNS
setItem string key, string
value
getItem string key string value
removeItem string key
clear
key i...
Snippet
13年7月19⽇日星期五
Snippet
// original API
localStorage.setItem('decade', '00s');
localStorage.setItem('song', JSON.stringify({artist:
'ColdP...
Store.js
other libraies: locache, LawnChair
13年7月19⽇日星期五
Store.js
// 3rd library - store.js
// https://github.com/marcuswestin/store.js
store.set('decade', '00s')
store.set('song'...
Event
Read more: storage event spec
13年7月19⽇日星期五
Event
PROPERTY TYPE
key string
oldValue any
newValue any
url string
*timestamp double
Read more: storage event spec
13年7月1...
Event
PROPERTY TYPE
key string
oldValue any
newValue any
url string
*timestamp double
Read more: storage event spec
13年7月1...
Event
PROPERTY TYPE
key string
oldValue any
newValue any
url string
*timestamp double
Read more: storage event spec
13年7月1...
Event
PROPERTY TYPE
key string
oldValue any
newValue any
url string
*timestamp double
Read more: storage event spec
13年7月1...
Event
PROPERTY TYPE
key string
oldValue any
newValue any
url string
*timestamp double
Read more: storage event spec
13年7月1...
Event
PROPERTY TYPE
key string
oldValue any
newValue any
url string
*timestamp double
Read more: storage event spec
13年7月1...
StorageEvent
other libraies: StorageEvent
13年7月19⽇日星期五
StorageEvent
// StorageEvent doesn’t bubble and is not cancelable
window.addEventListener('storage', function (e) {
if (!e...
Compatibility
13年7月19⽇日星期五
Compatibility
works well in major browsers...
13年7月19⽇日星期五
Compatibility
works well in major browsers...
13年7月19⽇日星期五
Capacity
Read more: localStorage capacity
13年7月19⽇日星期五
Capacity
has a limited capacity (2-5MB) per subdomain...
Read more: localStorage capacity
13年7月19⽇日星期五
Capacity
has a limited capacity (2-5MB) per subdomain...
Browser localStorage sessionStorage globalStorage
Android
2.2 - 4...
Capacity
has a limited capacity (2-5MB) per subdomain...
Browser localStorage sessionStorage globalStorage
Android
2.2 - 4...
Capacity
has a limited capacity (2-5MB) per subdomain...
Browser localStorage sessionStorage globalStorage
Android
2.2 - 4...
Capacity
has a limited capacity (2-5MB) per subdomain...
Browser localStorage sessionStorage globalStorage
Android
2.2 - 4...
Capacity
has a limited capacity (2-5MB) per subdomain...
Browser localStorage sessionStorage globalStorage
Android
2.2 - 4...
Scope
13年7月19⽇日星期五
Scope
• is scoped to the subdomain
13年7月19⽇日星期五
Scope
• is scoped to the subdomain
• values on Secure (SSL) pages are
isolated
13年7月19⽇日星期五
Scope
• is scoped to the subdomain
• values on Secure (SSL) pages are
isolated
• sessionStorage values survive some
browse...
Scope
• is scoped to the subdomain
• values on Secure (SSL) pages are
isolated
• sessionStorage values survive some
browse...
Usage
13年7月19⽇日星期五
Usage
• persistent user data
13年7月19⽇日星期五
Usage
• persistent user data
• persistent app state
13年7月19⽇日星期五
Usage
• persistent user data
• persistent app state
• filled-in forms
13年7月19⽇日星期五
Usage
• persistent user data
• persistent app state
• filled-in forms
• client cache
13年7月19⽇日星期五
Persistent User Data
try: Dillinger
13年7月19⽇日星期五
Persistent User Data
save user profile...
try: Dillinger
13年7月19⽇日星期五
Persistent User Data
save user profile...
try: Dillinger
13年7月19⽇日星期五
Persistent App State
try: JSHint
13年7月19⽇日星期五
Persistent App State
remember checked options...
try: JSHint
13年7月19⽇日星期五
Persistent App State
remember checked options...
try: JSHint
13年7月19⽇日星期五
Filled-in Forms
try: autoStorage Savify
13年7月19⽇日星期五
Filled-in Forms
remember author information...
try: autoStorage Savify
13年7月19⽇日星期五
Filled-in Forms
remember author information...
try: autoStorage Savify
13年7月19⽇日星期五
Client Cache
Specialized libraries: lscache, Inject, Basket.js
13年7月19⽇日星期五
Client Cache
• cache API results
Specialized libraries: lscache, Inject, Basket.js
13年7月19⽇日星期五
Client Cache
• cache API results
• cache AJAX results
Specialized libraries: lscache, Inject, Basket.js
13年7月19⽇日星期五
Client Cache
• cache API results
• cache AJAX results
• cache resources
Specialized libraries: lscache, Inject, Basket.js
...
Abusage
Read more: localStorage performance
13年7月19⽇日星期五
Abusage
• serialize unnecessarily
Read more: localStorage performance
13年7月19⽇日星期五
Abusage
• serialize unnecessarily
• excessive keys
Read more: localStorage performance
13年7月19⽇日星期五
Abusage
• serialize unnecessarily
• excessive keys
• excessive gets/sets
Read more: localStorage performance
13年7月19⽇日星期五
Abusage
• serialize unnecessarily
• excessive keys
• excessive gets/sets
• block the UI
Read more: localStorage performanc...
Abusage
• serialize unnecessarily
• excessive keys
• excessive gets/sets
• block the UI
• assume localStorage always works...
Abusage
• serialize unnecessarily
• excessive keys
• excessive gets/sets
• block the UI
• assume localStorage always works...
Don’t Serialize Unnessarily
try: Primitives vs. Strings
JSON.stringify
13年7月19⽇日星期五
Don’t Serialize Unnessarily
before:
function store(key, val) {
localStorage.setItem(key, JSON.stringify(val));
}
store('nu...
Don’t Serialize Unnessarily
before:
function store(key, val) {
localStorage.setItem(key, JSON.stringify(val));
}
store('nu...
Don’t Serialize Unnessarily
before:
function store(key, val) {
localStorage.setItem(key, JSON.stringify(val));
}
store('nu...
Don’t Serialize Unnessarily
try: String split/join vs. JSON Stringify
13年7月19⽇日星期五
Don’t Serialize Unnessarily
before:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits.join...
Don’t Serialize Unnessarily
before:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits.join...
Don’t Serialize Unnessarily
before:
var fruits = ['apple', 'banana', 'orange'];
localStorage.setItem('fruits', fruits.join...
Don’t Serialize Unnessarily
try: Multiple keys vs. JSON
2 keys vs. JSON
13年7月19⽇日星期五
Don’t Serialize Unnessarily
before:
localStorage.setItem('location', JSON.stringify({'state':
'texas', 'city': 'austin'}))...
Don’t Serialize Unnessarily
before:
localStorage.setItem('location', JSON.stringify({'state':
'texas', 'city': 'austin'}))...
Don’t Serialize Unnessarily
before:
localStorage.setItem('location', JSON.stringify({'state':
'texas', 'city': 'austin'}))...
Don’t Serialize Unnessarily
try: 1 long key vs. multiple short keys
13年7月19⽇日星期五
Don’t Serialize Unnessarily
before:
localStorage.setItem('first', 'pamela');
localStorage.setItem('middle', 'susan');
loca...
Don’t Serialize Unnessarily
before:
localStorage.setItem('first', 'pamela');
localStorage.setItem('middle', 'susan');
loca...
Don’t Serialize Unnessarily
before:
localStorage.setItem('first', 'pamela');
localStorage.setItem('middle', 'susan');
loca...
Don’t Serialize Unnessarily
try: Caching in local memory
Caching in the DOM
13年7月19⽇日星期五
Don’t Serialize Unnessarily
before:
$('input[type="checkbox"]').click(function() {
localStorage.setItem($(this).attr('name...
Don’t Serialize Unnessarily
before:
$('input[type="checkbox"]').click(function() {
localStorage.setItem($(this).attr('name...
Don’t Serialize Unnessarily
before:
$('input[type="checkbox"]').click(function() {
localStorage.setItem($(this).attr('name...
Don’t Serialize Unnessarily
try: Not blocking the UI in tight js loops
13年7月19⽇日星期五
Don’t Serialize Unnessarily
before:
<head>
<script>
$('#name').html(localStorage.getItem('name'));
</script>
</head>
try: ...
Don’t Serialize Unnessarily
before:
<head>
<script>
$('#name').html(localStorage.getItem('name'));
</script>
</head>
after...
Don’t Serialize Unnessarily
before:
<head>
<script>
$('#name').html(localStorage.getItem('name'));
</script>
</head>
after...
Don’t Serialize Unnessarily
try: Nicholas Zakas: Responsive Interfaces
13年7月19⽇日星期五
Don’t Serialize Unnessarily
before:
$('button').click(function() {
var name = localStorage.getItem('name');
$('#name').htm...
Don’t Serialize Unnessarily
before:
$('button').click(function() {
var name = localStorage.getItem('name');
$('#name').htm...
Don’t Serialize Unnessarily
before:
$('button').click(function() {
var name = localStorage.getItem('name');
$('#name').htm...
Don’t Serialize Unnessarily
try: jQuery throttle/debounce plugin
2 localStorage tips
13年7月19⽇日星期五
Don’t Serialize Unnessarily
before:
$('textarea').keydown(function() {
localStorage.setItem('text', $(this).text());
});
t...
Don’t Serialize Unnessarily
before:
$('textarea').keydown(function() {
localStorage.setItem('text', $(this).text());
});
a...
Don’t Serialize Unnessarily
before:
$('textarea').keydown(function() {
localStorage.setItem('text', $(this).text());
});
a...
Don’t Serialize Unnessarily
13年7月19⽇日星期五
Don’t Serialize Unnessarily
bad:
localStorage.setItem('bla', 'bla');
13年7月19⽇日星期五
Don’t Serialize Unnessarily
bad:
localStorage.setItem('bla', 'bla');
better:
if (window.localStorage) {
localStorage.setIt...
Don’t Serialize Unnessarily
bad:
localStorage.setItem('bla', 'bla');
better:
if (window.localStorage) {
localStorage.setIt...
Don’t Serialize Unnessarily
bad:
localStorage.setItem('bla', 'bla');
better:
if (window.localStorage) {
localStorage.setIt...
Don’t Serialize Unnessarily
try: long vs. short names
13年7月19⽇日星期五
Don’t Serialize Unnessarily
bad:
localStorage.setItem('name', 'pamela');
try: long vs. short names
13年7月19⽇日星期五
Don’t Serialize Unnessarily
bad:
localStorage.setItem('name', 'pamela');
better:
localStorage.setItem('conference-speaker-...
Don’t Serialize Unnessarily
bad:
localStorage.setItem('name', 'pamela');
better:
localStorage.setItem('conference-speaker-...
Don’t Serialize Unnessarily
bad:
localStorage.setItem('name', 'pamela');
better:
localStorage.setItem('conference-speaker-...
QA
13年7月19⽇日星期五
Upcoming SlideShare
Loading in...5
×

A Brief Introduction To Local Storage

633

Published on

Published in: Business, Technology
1 Comment
1 Like
Statistics
Notes
  • Do not write transcirpt in your own language . You should write in english that would be better for all the users
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
633
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "A Brief Introduction To Local Storage"

  1. 1. A Brief Introduction to localStorage Shouqiang Gong - @StuPig_me 13年7月19⽇日星期五
  2. 2. API Read more: localStorage spec 13年7月19⽇日星期五
  3. 3. API METHOD ARGS RETURNS setItem string key, string value getItem string key string value removeItem string key clear key int index string key length int length Read more: localStorage spec 13年7月19⽇日星期五
  4. 4. API METHOD ARGS RETURNS setItem string key, string value getItem string key string value removeItem string key clear key int index string key length int length Read more: localStorage spec 13年7月19⽇日星期五
  5. 5. API METHOD ARGS RETURNS setItem string key, string value getItem string key string value removeItem string key clear key int index string key length int length Read more: localStorage spec 13年7月19⽇日星期五
  6. 6. API METHOD ARGS RETURNS setItem string key, string value getItem string key string value removeItem string key clear key int index string key length int length Read more: localStorage spec 13年7月19⽇日星期五
  7. 7. API METHOD ARGS RETURNS setItem string key, string value getItem string key string value removeItem string key clear key int index string key length int length Read more: localStorage spec 13年7月19⽇日星期五
  8. 8. API METHOD ARGS RETURNS setItem string key, string value getItem string key string value removeItem string key clear key int index string key length int length Read more: localStorage spec 13年7月19⽇日星期五
  9. 9. API METHOD ARGS RETURNS setItem string key, string value getItem string key string value removeItem string key clear key int index string key length int length Read more: localStorage spec 13年7月19⽇日星期五
  10. 10. Snippet 13年7月19⽇日星期五
  11. 11. Snippet // original API localStorage.setItem('decade', '00s'); localStorage.setItem('song', JSON.stringify({artist: 'ColdPlay', title: 'Yellow'})); var decade = localStorage.getItem('decade'); var song = JSON.parse(localStorage.getItem('song')); alert('Best song in the ' + decade + ' was ' + song.title + ' by ' + song.artist); 13年7月19⽇日星期五
  12. 12. Store.js other libraies: locache, LawnChair 13年7月19⽇日星期五
  13. 13. Store.js // 3rd library - store.js // https://github.com/marcuswestin/store.js store.set('decade', '00s') store.set('song', {artist: 'ColdPlay', title: 'Yellow'}); var decade = store.get('decade'); var song = store.get('song'); alert('Best song in the ' + decade + ' was ' + song.title + ' by ' + song.artist); other libraies: locache, LawnChair 13年7月19⽇日星期五
  14. 14. Event Read more: storage event spec 13年7月19⽇日星期五
  15. 15. Event PROPERTY TYPE key string oldValue any newValue any url string *timestamp double Read more: storage event spec 13年7月19⽇日星期五
  16. 16. Event PROPERTY TYPE key string oldValue any newValue any url string *timestamp double Read more: storage event spec 13年7月19⽇日星期五
  17. 17. Event PROPERTY TYPE key string oldValue any newValue any url string *timestamp double Read more: storage event spec 13年7月19⽇日星期五
  18. 18. Event PROPERTY TYPE key string oldValue any newValue any url string *timestamp double Read more: storage event spec 13年7月19⽇日星期五
  19. 19. Event PROPERTY TYPE key string oldValue any newValue any url string *timestamp double Read more: storage event spec 13年7月19⽇日星期五
  20. 20. Event PROPERTY TYPE key string oldValue any newValue any url string *timestamp double Read more: storage event spec 13年7月19⽇日星期五
  21. 21. StorageEvent other libraies: StorageEvent 13年7月19⽇日星期五
  22. 22. StorageEvent // StorageEvent doesn’t bubble and is not cancelable window.addEventListener('storage', function (e) { if (!e) e = window.event; }, false) // trigger the event manually var evt = document.createEvent('StorageEvent'); // args: type canBubble cancelBubble key oldVaule // newValue url storageArea evt.initStorageEvent('StorageEvent', ...); window.dispatch(evt); other libraies: StorageEvent 13年7月19⽇日星期五
  23. 23. Compatibility 13年7月19⽇日星期五
  24. 24. Compatibility works well in major browsers... 13年7月19⽇日星期五
  25. 25. Compatibility works well in major browsers... 13年7月19⽇日星期五
  26. 26. Capacity Read more: localStorage capacity 13年7月19⽇日星期五
  27. 27. Capacity has a limited capacity (2-5MB) per subdomain... Read more: localStorage capacity 13年7月19⽇日星期五
  28. 28. Capacity has a limited capacity (2-5MB) per subdomain... Browser localStorage sessionStorage globalStorage Android 2.2 - 4.2 2.49M unlimited (except 3.0) none iPhone 3.1 - 6.1 2.49M 2.49M none Chrome Mobile 16 - 28 2.49M 2.49M none IE Mobile 9 - 10 4.75M 4.75M none Read more: localStorage capacity 13年7月19⽇日星期五
  29. 29. Capacity has a limited capacity (2-5MB) per subdomain... Browser localStorage sessionStorage globalStorage Android 2.2 - 4.2 2.49M unlimited (except 3.0) none iPhone 3.1 - 6.1 2.49M 2.49M none Chrome Mobile 16 - 28 2.49M 2.49M none IE Mobile 9 - 10 4.75M 4.75M none Read more: localStorage capacity 13年7月19⽇日星期五
  30. 30. Capacity has a limited capacity (2-5MB) per subdomain... Browser localStorage sessionStorage globalStorage Android 2.2 - 4.2 2.49M unlimited (except 3.0) none iPhone 3.1 - 6.1 2.49M 2.49M none Chrome Mobile 16 - 28 2.49M 2.49M none IE Mobile 9 - 10 4.75M 4.75M none Read more: localStorage capacity 13年7月19⽇日星期五
  31. 31. Capacity has a limited capacity (2-5MB) per subdomain... Browser localStorage sessionStorage globalStorage Android 2.2 - 4.2 2.49M unlimited (except 3.0) none iPhone 3.1 - 6.1 2.49M 2.49M none Chrome Mobile 16 - 28 2.49M 2.49M none IE Mobile 9 - 10 4.75M 4.75M none Read more: localStorage capacity 13年7月19⽇日星期五
  32. 32. Capacity has a limited capacity (2-5MB) per subdomain... Browser localStorage sessionStorage globalStorage Android 2.2 - 4.2 2.49M unlimited (except 3.0) none iPhone 3.1 - 6.1 2.49M 2.49M none Chrome Mobile 16 - 28 2.49M 2.49M none IE Mobile 9 - 10 4.75M 4.75M none Read more: localStorage capacity 13年7月19⽇日星期五
  33. 33. Scope 13年7月19⽇日星期五
  34. 34. Scope • is scoped to the subdomain 13年7月19⽇日星期五
  35. 35. Scope • is scoped to the subdomain • values on Secure (SSL) pages are isolated 13年7月19⽇日星期五
  36. 36. Scope • is scoped to the subdomain • values on Secure (SSL) pages are isolated • sessionStorage values survive some browser restarts 13年7月19⽇日星期五
  37. 37. Scope • is scoped to the subdomain • values on Secure (SSL) pages are isolated • sessionStorage values survive some browser restarts • values created in “incognito” mode are isolated 13年7月19⽇日星期五
  38. 38. Usage 13年7月19⽇日星期五
  39. 39. Usage • persistent user data 13年7月19⽇日星期五
  40. 40. Usage • persistent user data • persistent app state 13年7月19⽇日星期五
  41. 41. Usage • persistent user data • persistent app state • filled-in forms 13年7月19⽇日星期五
  42. 42. Usage • persistent user data • persistent app state • filled-in forms • client cache 13年7月19⽇日星期五
  43. 43. Persistent User Data try: Dillinger 13年7月19⽇日星期五
  44. 44. Persistent User Data save user profile... try: Dillinger 13年7月19⽇日星期五
  45. 45. Persistent User Data save user profile... try: Dillinger 13年7月19⽇日星期五
  46. 46. Persistent App State try: JSHint 13年7月19⽇日星期五
  47. 47. Persistent App State remember checked options... try: JSHint 13年7月19⽇日星期五
  48. 48. Persistent App State remember checked options... try: JSHint 13年7月19⽇日星期五
  49. 49. Filled-in Forms try: autoStorage Savify 13年7月19⽇日星期五
  50. 50. Filled-in Forms remember author information... try: autoStorage Savify 13年7月19⽇日星期五
  51. 51. Filled-in Forms remember author information... try: autoStorage Savify 13年7月19⽇日星期五
  52. 52. Client Cache Specialized libraries: lscache, Inject, Basket.js 13年7月19⽇日星期五
  53. 53. Client Cache • cache API results Specialized libraries: lscache, Inject, Basket.js 13年7月19⽇日星期五
  54. 54. Client Cache • cache API results • cache AJAX results Specialized libraries: lscache, Inject, Basket.js 13年7月19⽇日星期五
  55. 55. Client Cache • cache API results • cache AJAX results • cache resources Specialized libraries: lscache, Inject, Basket.js 13年7月19⽇日星期五
  56. 56. Abusage Read more: localStorage performance 13年7月19⽇日星期五
  57. 57. Abusage • serialize unnecessarily Read more: localStorage performance 13年7月19⽇日星期五
  58. 58. Abusage • serialize unnecessarily • excessive keys Read more: localStorage performance 13年7月19⽇日星期五
  59. 59. Abusage • serialize unnecessarily • excessive keys • excessive gets/sets Read more: localStorage performance 13年7月19⽇日星期五
  60. 60. Abusage • serialize unnecessarily • excessive keys • excessive gets/sets • block the UI Read more: localStorage performance 13年7月19⽇日星期五
  61. 61. Abusage • serialize unnecessarily • excessive keys • excessive gets/sets • block the UI • assume localStorage always works Read more: localStorage performance 13年7月19⽇日星期五
  62. 62. Abusage • serialize unnecessarily • excessive keys • excessive gets/sets • block the UI • assume localStorage always works • use key names that collide Read more: localStorage performance 13年7月19⽇日星期五
  63. 63. Don’t Serialize Unnessarily try: Primitives vs. Strings JSON.stringify 13年7月19⽇日星期五
  64. 64. Don’t Serialize Unnessarily before: function store(key, val) { localStorage.setItem(key, JSON.stringify(val)); } store('num', 1); store('on', true); store('name', 'pamela'); try: Primitives vs. Strings JSON.stringify 13年7月19⽇日星期五
  65. 65. Don’t Serialize Unnessarily before: function store(key, val) { localStorage.setItem(key, JSON.stringify(val)); } store('num', 1); store('on', true); store('name', 'pamela'); after: function store(key, val) { localStorage.setItem(key, val); } store('num', '1'); store('on', 'true'); store('name', 'pamela'); try: Primitives vs. Strings JSON.stringify 13年7月19⽇日星期五
  66. 66. Don’t Serialize Unnessarily before: function store(key, val) { localStorage.setItem(key, JSON.stringify(val)); } store('num', 1); store('on', true); store('name', 'pamela'); after: function store(key, val) { localStorage.setItem(key, val); } store('num', '1'); store('on', 'true'); store('name', 'pamela'); try: Primitives vs. Strings JSON.stringify use strings where possible 13年7月19⽇日星期五
  67. 67. Don’t Serialize Unnessarily try: String split/join vs. JSON Stringify 13年7月19⽇日星期五
  68. 68. Don’t Serialize Unnessarily before: var fruits = ['apple', 'banana', 'orange']; localStorage.setItem('fruits', fruits.join(',')); var fruits = localStorage.getItem('fruits').split(','); try: String split/join vs. JSON Stringify 13年7月19⽇日星期五
  69. 69. Don’t Serialize Unnessarily before: var fruits = ['apple', 'banana', 'orange']; localStorage.setItem('fruits', fruits.join(',')); var fruits = localStorage.getItem('fruits').split(','); after: var fruits = ['apple', 'banana', 'orange']; localStorage.setItem('fruits', JSON.stringify(fruits)); var fruits = JSON.parse(localStorage.getItem('fruits')); try: String split/join vs. JSON Stringify 13年7月19⽇日星期五
  70. 70. Don’t Serialize Unnessarily before: var fruits = ['apple', 'banana', 'orange']; localStorage.setItem('fruits', fruits.join(',')); var fruits = localStorage.getItem('fruits').split(','); after: var fruits = ['apple', 'banana', 'orange']; localStorage.setItem('fruits', JSON.stringify(fruits)); var fruits = JSON.parse(localStorage.getItem('fruits')); use own serializer if its faster try: String split/join vs. JSON Stringify 13年7月19⽇日星期五
  71. 71. Don’t Serialize Unnessarily try: Multiple keys vs. JSON 2 keys vs. JSON 13年7月19⽇日星期五
  72. 72. Don’t Serialize Unnessarily before: localStorage.setItem('location', JSON.stringify({'state': 'texas', 'city': 'austin'})); try: Multiple keys vs. JSON 2 keys vs. JSON 13年7月19⽇日星期五
  73. 73. Don’t Serialize Unnessarily before: localStorage.setItem('location', JSON.stringify({'state': 'texas', 'city': 'austin'})); after: localStorage.setItem('location-state', 'texas'); localStorage.setItem('location-city', 'austin'); try: Multiple keys vs. JSON 2 keys vs. JSON 13年7月19⽇日星期五
  74. 74. Don’t Serialize Unnessarily before: localStorage.setItem('location', JSON.stringify({'state': 'texas', 'city': 'austin'})); after: localStorage.setItem('location-state', 'texas'); localStorage.setItem('location-city', 'austin'); try: Multiple keys vs. JSON 2 keys vs. JSON store multiple strings instead of 1 object if it is faster 13年7月19⽇日星期五
  75. 75. Don’t Serialize Unnessarily try: 1 long key vs. multiple short keys 13年7月19⽇日星期五
  76. 76. Don’t Serialize Unnessarily before: localStorage.setItem('first', 'pamela'); localStorage.setItem('middle', 'susan'); localStorage.setItem('last', 'fox'); try: 1 long key vs. multiple short keys 13年7月19⽇日星期五
  77. 77. Don’t Serialize Unnessarily before: localStorage.setItem('first', 'pamela'); localStorage.setItem('middle', 'susan'); localStorage.setItem('last', 'fox'); after: localStorage.setItem('name', 'pamela susan fox'); try: 1 long key vs. multiple short keys 13年7月19⽇日星期五
  78. 78. Don’t Serialize Unnessarily before: localStorage.setItem('first', 'pamela'); localStorage.setItem('middle', 'susan'); localStorage.setItem('last', 'fox'); after: localStorage.setItem('name', 'pamela susan fox'); try: 1 long key vs. multiple short keys combine logical keys commonly accessed together 13年7月19⽇日星期五
  79. 79. Don’t Serialize Unnessarily try: Caching in local memory Caching in the DOM 13年7月19⽇日星期五
  80. 80. Don’t Serialize Unnessarily before: $('input[type="checkbox"]').click(function() { localStorage.setItem($(this).attr('name'), $ (this).is(':checked')); }); try: Caching in local memory Caching in the DOM 13年7月19⽇日星期五
  81. 81. Don’t Serialize Unnessarily before: $('input[type="checkbox"]').click(function() { localStorage.setItem($(this).attr('name'), $ (this).is(':checked')); }); after: window.onunload = function() { $('input[type="checkbox"]').each(function() { localStorage.setItem($(this).attr('name'), $ (this).is(':checked')); }); }; try: Caching in local memory Caching in the DOM 13年7月19⽇日星期五
  82. 82. Don’t Serialize Unnessarily before: $('input[type="checkbox"]').click(function() { localStorage.setItem($(this).attr('name'), $ (this).is(':checked')); }); after: window.onunload = function() { $('input[type="checkbox"]').each(function() { localStorage.setItem($(this).attr('name'), $ (this).is(':checked')); }); }; try: Caching in local memory Caching in the DOM cache data in local memory/DOM,and only get/set on window load/unload 13年7月19⽇日星期五
  83. 83. Don’t Serialize Unnessarily try: Not blocking the UI in tight js loops 13年7月19⽇日星期五
  84. 84. Don’t Serialize Unnessarily before: <head> <script> $('#name').html(localStorage.getItem('name')); </script> </head> try: Not blocking the UI in tight js loops 13年7月19⽇日星期五
  85. 85. Don’t Serialize Unnessarily before: <head> <script> $('#name').html(localStorage.getItem('name')); </script> </head> after: <body></body> <script> window.onload = function() { $('#name').html(localStorage.getItem('name')); }; </script> try: Not blocking the UI in tight js loops 13年7月19⽇日星期五
  86. 86. Don’t Serialize Unnessarily before: <head> <script> $('#name').html(localStorage.getItem('name')); </script> </head> after: <body></body> <script> window.onload = function() { $('#name').html(localStorage.getItem('name')); }; </script> try: Not blocking the UI in tight js loops defer using localStorage until onload 13年7月19⽇日星期五
  87. 87. Don’t Serialize Unnessarily try: Nicholas Zakas: Responsive Interfaces 13年7月19⽇日星期五
  88. 88. Don’t Serialize Unnessarily before: $('button').click(function() { var name = localStorage.getItem('name'); $('#name').html(name); }); try: Nicholas Zakas: Responsive Interfaces 13年7月19⽇日星期五
  89. 89. Don’t Serialize Unnessarily before: $('button').click(function() { var name = localStorage.getItem('name'); $('#name').html(name); }); after: $('button').click(function() { window.setTimeout(function() { var name = localStorage.getItem('name'); $('#name').html(name); }, 10); }); try: Nicholas Zakas: Responsive Interfaces 13年7月19⽇日星期五
  90. 90. Don’t Serialize Unnessarily before: $('button').click(function() { var name = localStorage.getItem('name'); $('#name').html(name); }); after: $('button').click(function() { window.setTimeout(function() { var name = localStorage.getItem('name'); $('#name').html(name); }, 10); }); try: Nicholas Zakas: Responsive Interfaces use setTimeout to defer localStorage access 13年7月19⽇日星期五
  91. 91. Don’t Serialize Unnessarily try: jQuery throttle/debounce plugin 2 localStorage tips 13年7月19⽇日星期五
  92. 92. Don’t Serialize Unnessarily before: $('textarea').keydown(function() { localStorage.setItem('text', $(this).text()); }); try: jQuery throttle/debounce plugin 2 localStorage tips 13年7月19⽇日星期五
  93. 93. Don’t Serialize Unnessarily before: $('textarea').keydown(function() { localStorage.setItem('text', $(this).text()); }); after: $('textarea').keydown(function() { $.debounce(250, function() { localStorage.setItem('text', $(this).text()); }); }); try: jQuery throttle/debounce plugin 2 localStorage tips 13年7月19⽇日星期五
  94. 94. Don’t Serialize Unnessarily before: $('textarea').keydown(function() { localStorage.setItem('text', $(this).text()); }); after: $('textarea').keydown(function() { $.debounce(250, function() { localStorage.setItem('text', $(this).text()); }); }); try: jQuery throttle/debounce plugin 2 localStorage tips throttle or debounce to avoid repetitive gets/sets 13年7月19⽇日星期五
  95. 95. Don’t Serialize Unnessarily 13年7月19⽇日星期五
  96. 96. Don’t Serialize Unnessarily bad: localStorage.setItem('bla', 'bla'); 13年7月19⽇日星期五
  97. 97. Don’t Serialize Unnessarily bad: localStorage.setItem('bla', 'bla'); better: if (window.localStorage) { localStorage.setItem('bla', 'bla'); } 13年7月19⽇日星期五
  98. 98. Don’t Serialize Unnessarily bad: localStorage.setItem('bla', 'bla'); better: if (window.localStorage) { localStorage.setItem('bla', 'bla'); } best: if (window.localStorage) { try { localStorage.setItem('bla', 'bla'); } catch(e) { if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') { } else { } } } 13年7月19⽇日星期五
  99. 99. Don’t Serialize Unnessarily bad: localStorage.setItem('bla', 'bla'); better: if (window.localStorage) { localStorage.setItem('bla', 'bla'); } best: if (window.localStorage) { try { localStorage.setItem('bla', 'bla'); } catch(e) { if (e.name === 'QUOTA_EXCEEDED_ERR' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') { } else { } } } check for feature support 13年7月19⽇日星期五
  100. 100. Don’t Serialize Unnessarily try: long vs. short names 13年7月19⽇日星期五
  101. 101. Don’t Serialize Unnessarily bad: localStorage.setItem('name', 'pamela'); try: long vs. short names 13年7月19⽇日星期五
  102. 102. Don’t Serialize Unnessarily bad: localStorage.setItem('name', 'pamela'); better: localStorage.setItem('conference-speaker-first-name', 'pamela'); try: long vs. short names 13年7月19⽇日星期五
  103. 103. Don’t Serialize Unnessarily bad: localStorage.setItem('name', 'pamela'); better: localStorage.setItem('conference-speaker-first-name', 'pamela'); best: lscache.setBucket('conference-speaker'); lscache.set('first-name', 'pamela'); try: long vs. short names 13年7月19⽇日星期五
  104. 104. Don’t Serialize Unnessarily bad: localStorage.setItem('name', 'pamela'); better: localStorage.setItem('conference-speaker-first-name', 'pamela'); best: lscache.setBucket('conference-speaker'); lscache.set('first-name', 'pamela'); try: long vs. short names use highliy descriptive keys with pseudo namespaces 13年7月19⽇日星期五
  105. 105. QA 13年7月19⽇日星期五
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×