Skip to content

Commit 7388d0c

Browse files
MichaelWest22MichaelWest22
authored
Move History storage to sessionStorage (#3305)
* Move History storage to sessionStorage and history path to window * Fix type warnings * Revert currentPathForHistory to move it to its own PR * fix test
1 parent 508e332 commit 7388d0c

15 files changed

Lines changed: 72 additions & 72 deletions

File tree

‎src/htmx.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ var htmx = (function() {
8282
*/
8383
historyEnabled: true,
8484
/**
85-
* The number of pages to keep in **localStorage** for history support.
85+
* The number of pages to keep in **sessionStorage** for history support.
8686
* @type number
8787
* @default 10
8888
*/
@@ -819,10 +819,10 @@ var htmx = (function() {
819819
* @returns {boolean}
820820
*/
821821
function canAccessLocalStorage() {
822-
const test = 'htmx:localStorageTest'
822+
const test = 'htmx:sessionStorageTest'
823823
try {
824-
localStorage.setItem(test, test)
825-
localStorage.removeItem(test)
824+
sessionStorage.setItem(test, test)
825+
sessionStorage.removeItem(test)
826826
return true
827827
} catch (e) {
828828
return false
@@ -3137,13 +3137,13 @@ var htmx = (function() {
31373137

31383138
if (htmx.config.historyCacheSize <= 0) {
31393139
// make sure that an eventually already existing cache is purged
3140-
localStorage.removeItem('htmx-history-cache')
3140+
sessionStorage.removeItem('htmx-history-cache')
31413141
return
31423142
}
31433143

31443144
url = normalizePath(url)
31453145

3146-
const historyCache = parseJSON(localStorage.getItem('htmx-history-cache')) || []
3146+
const historyCache = parseJSON(sessionStorage.getItem('htmx-history-cache')) || []
31473147
for (let i = 0; i < historyCache.length; i++) {
31483148
if (historyCache[i].url === url) {
31493149
historyCache.splice(i, 1)
@@ -3164,7 +3164,7 @@ var htmx = (function() {
31643164
// keep trying to save the cache until it succeeds or is empty
31653165
while (historyCache.length > 0) {
31663166
try {
3167-
localStorage.setItem('htmx-history-cache', JSON.stringify(historyCache))
3167+
sessionStorage.setItem('htmx-history-cache', JSON.stringify(historyCache))
31683168
break
31693169
} catch (e) {
31703170
triggerErrorEvent(getDocument().body, 'htmx:historyCacheError', { cause: e, cache: historyCache })
@@ -3192,7 +3192,7 @@ var htmx = (function() {
31923192

31933193
url = normalizePath(url)
31943194

3195-
const historyCache = parseJSON(localStorage.getItem('htmx-history-cache')) || []
3195+
const historyCache = parseJSON(sessionStorage.getItem('htmx-history-cache')) || []
31963196
for (let i = 0; i < historyCache.length; i++) {
31973197
if (historyCache[i].url === url) {
31983198
return historyCache[i]
@@ -3226,7 +3226,7 @@ var htmx = (function() {
32263226
// is present *anywhere* in the current document we're about to save,
32273227
// so we can prevent privileged data entering the cache.
32283228
// The page will still be reachable as a history entry, but htmx will fetch it
3229-
// live from the server onpopstate rather than look in the localStorage cache
3229+
// live from the server onpopstate rather than look in the sessionStorage cache
32303230
const disableHistoryCache = getDocument().querySelector('[hx-history="false" i],[data-hx-history="false" i]')
32313231
if (!disableHistoryCache) {
32323232
triggerEvent(getDocument().body, 'htmx:beforeHistorySave', { path, historyElt: elt })

‎test/attributes/hx-history.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ describe('hx-history attribute', function() {
44
beforeEach(function() {
55
this.server = makeServer()
66
clearWorkArea()
7-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
7+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
88
})
99
afterEach(function() {
1010
this.server.restore()
1111
clearWorkArea()
12-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
12+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
1313
})
1414

1515
it('history cache should not contain embargoed content', function() {
@@ -32,8 +32,8 @@ describe('hx-history attribute', function() {
3232
this.server.respond()
3333
workArea.textContent.should.equal('test3')
3434

35-
// embargoed content should NOT be in the localStorage cache
36-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
35+
// embargoed content should NOT be in the sessionStorage cache
36+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
3737
cache.length.should.equal(2)
3838

3939
// on history navigation, embargoed content is retrieved from server

‎test/attributes/hx-push-url.js‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ describe('hx-push-url attribute', function() {
55
beforeEach(function() {
66
this.server = makeServer()
77
clearWorkArea()
8-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
8+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
99
})
1010
afterEach(function() {
1111
this.server.restore()
1212
clearWorkArea()
13-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
13+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
1414
})
1515

1616
it('navigation should push an element into the cache when true', function() {
@@ -22,7 +22,7 @@ describe('hx-push-url attribute', function() {
2222
div.click()
2323
this.server.respond()
2424
getWorkArea().textContent.should.equal('second')
25-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
25+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
2626
cache[cache.length - 1].url.should.equal('/test')
2727
})
2828

@@ -35,7 +35,7 @@ describe('hx-push-url attribute', function() {
3535
div.click()
3636
this.server.respond()
3737
getWorkArea().textContent.should.equal('second')
38-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
38+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
3939
should.equal(cache, null)
4040
})
4141

@@ -48,7 +48,7 @@ describe('hx-push-url attribute', function() {
4848
div.click()
4949
this.server.respond()
5050
getWorkArea().textContent.should.equal('second')
51-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
51+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
5252
cache.length.should.equal(2)
5353
cache[1].url.should.equal('/abc123')
5454
})
@@ -68,7 +68,7 @@ describe('hx-push-url attribute', function() {
6868
this.server.respond()
6969
workArea.textContent.should.equal('test2')
7070

71-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
71+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
7272

7373
cache.length.should.equal(2)
7474
htmx._('restoreHistory')('/test1')
@@ -106,7 +106,7 @@ describe('hx-push-url attribute', function() {
106106
byId('d1').click()
107107
this.server.respond()
108108
}
109-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
109+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
110110
cache.length.should.equal(10) // should only be 10 elements
111111
})
112112

@@ -125,10 +125,10 @@ describe('hx-push-url attribute', function() {
125125
this.server.respond()
126126
workArea.textContent.should.equal('test2')
127127

128-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
128+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
129129

130130
cache.length.should.equal(2)
131-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME) // clear cache
131+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME) // clear cache
132132
htmx._('restoreHistory')('/test1')
133133
this.server.respond()
134134
getWorkArea().textContent.should.equal('test1')
@@ -138,7 +138,7 @@ describe('hx-push-url attribute', function() {
138138
htmx.config.refreshOnHistoryMiss = true
139139
var refresh = false
140140
htmx.location = { reload: function() { refresh = true } }
141-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME) // clear cache
141+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME) // clear cache
142142
htmx._('restoreHistory')('/test3')
143143
refresh.should.equal(true)
144144
htmx.location = window.location
@@ -152,20 +152,20 @@ describe('hx-push-url attribute', function() {
152152
div.click()
153153
this.server.respond()
154154
getWorkArea().textContent.should.equal('second')
155-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
155+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
156156
cache.length.should.equal(1)
157157
})
158158

159159
it('deals with malformed JSON in history cache when getting', function() {
160-
localStorage.setItem(HTMX_HISTORY_CACHE_NAME, 'Invalid JSON')
160+
sessionStorage.setItem(HTMX_HISTORY_CACHE_NAME, 'Invalid JSON')
161161
var history = htmx._('getCachedHistory')('url')
162162
should.equal(history, null)
163163
})
164164

165165
it('deals with malformed JSON in history cache when saving', function() {
166-
localStorage.setItem(HTMX_HISTORY_CACHE_NAME, 'Invalid JSON')
166+
sessionStorage.setItem(HTMX_HISTORY_CACHE_NAME, 'Invalid JSON')
167167
htmx._('saveToHistoryCache')('url', make('<div>'))
168-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
168+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
169169
cache.length.should.equal(1)
170170
})
171171

@@ -174,17 +174,17 @@ describe('hx-push-url attribute', function() {
174174
htmx._('saveToHistoryCache')('url2', make('<div>'))
175175
htmx._('saveToHistoryCache')('url3', make('<div>'))
176176
htmx._('saveToHistoryCache')('url2', make('<div>'))
177-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
177+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
178178
cache.length.should.equal(3)
179179
})
180180

181181
it('setting history cache size to 0 clears cache', function() {
182182
htmx._('saveToHistoryCache')('url1', make('<div>'))
183-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
183+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
184184
cache.length.should.equal(1)
185185
htmx.config.historyCacheSize = 0
186186
htmx._('saveToHistoryCache')('url2', make('<div>'))
187-
cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
187+
cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
188188
should.equal(cache, null)
189189
htmx.config.historyCacheSize = 10
190190
})
@@ -195,7 +195,7 @@ describe('hx-push-url attribute', function() {
195195
htmx._('saveToHistoryCache')('url3', make('<div>'))
196196
htmx._('saveToHistoryCache')('url2', make('<div>'))
197197
htmx._('saveToHistoryCache')('url1', make('<div>'))
198-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
198+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
199199
cache.length.should.equal(3)
200200
cache[0].url.should.equal('/url3')
201201
cache[1].url.should.equal('/url2')
@@ -246,19 +246,19 @@ describe('hx-push-url attribute', function() {
246246
bigContent += bigContent
247247
}
248248
try {
249-
localStorage.removeItem('htmx-history-cache')
249+
sessionStorage.removeItem('htmx-history-cache')
250250
htmx._('saveToHistoryCache')('/dummy', make('<div>' + bigContent + '</div>'), 'Foo', 0)
251-
should.equal(localStorage.getItem('htmx-history-cache'), null)
251+
should.equal(sessionStorage.getItem('htmx-history-cache'), null)
252252
} finally {
253253
// clear history cache afterwards
254-
localStorage.removeItem('htmx-history-cache')
254+
sessionStorage.removeItem('htmx-history-cache')
255255
}
256256
})
257257

258258
if (/chrome/i.test(navigator.userAgent)) {
259-
it('when localStorage disabled history not saved fine', function() {
260-
var setItem = localStorage.setItem
261-
localStorage.setItem = undefined
259+
it('when sessionStorage disabled history not saved fine', function() {
260+
var setItem = sessionStorage.setItem
261+
sessionStorage.setItem = undefined
262262
this.server.respondWith('GET', '/test', 'second')
263263
getWorkArea().innerHTML.should.be.equal('')
264264
var div = make('<div hx-push-url="true" hx-get="/test">first</div>')
@@ -269,23 +269,23 @@ describe('hx-push-url attribute', function() {
269269
getWorkArea().textContent.should.equal('second')
270270
var hist = htmx._('getCachedHistory')('/test')
271271
should.equal(hist, null)
272-
localStorage.setItem = setItem
272+
sessionStorage.setItem = setItem
273273
})
274274
}
275275

276276
it.skip('normalizePath falls back to no normalization if path not valid URL', function() {
277277
// path normalization has a bug breaking it right now preventing this test
278278
htmx._('saveToHistoryCache')('http://', make('<div>'))
279279
htmx._('saveToHistoryCache')('http//', make('<div>'))
280-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
280+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
281281
cache.length.should.equal(2)
282282
cache[0].url.should.equal('http://') // no normalization as invalid
283283
cache[1].url.should.equal('/http') // can normalize this one
284284
})
285285

286286
it('history cache clears out disabled attribute', function() {
287287
htmx._('saveToHistoryCache')('/url1', make('<div><div data-disabled-by-htmx disabled></div></div>'))
288-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
288+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
289289
cache.length.should.equal(1)
290290
cache[0].url.should.equal('/url1')
291291
cache[0].content.should.equal('<div data-disabled-by-htmx=""></div>')
@@ -337,7 +337,7 @@ describe('hx-push-url attribute', function() {
337337
div1.click()
338338
this.server.respond()
339339
div1.innerHTML.should.equal('Result')
340-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
340+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
341341
cache.length.should.equal(1)
342342
path.should.equal('/pushpath')
343343
htmx.off('htmx:pushedIntoHistory', handler)
@@ -353,7 +353,7 @@ describe('hx-push-url attribute', function() {
353353
div1.click()
354354
this.server.respond()
355355
div1.innerHTML.should.equal('Result')
356-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
356+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
357357
cache.length.should.equal(1)
358358
path.should.equal('/pushpath')
359359
htmx.off('htmx:pushedIntoHistory', handler)
@@ -369,7 +369,7 @@ describe('hx-push-url attribute', function() {
369369
div1.click()
370370
this.server.respond()
371371
div1.innerHTML.should.equal('Result')
372-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
372+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
373373
should.equal(cache, null)
374374
path.should.equal('')
375375
htmx.off('htmx:pushedIntoHistory', handler)

‎test/attributes/hx-replace-url.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ describe('hx-replace-url attribute', function() {
44
beforeEach(function() {
55
this.server = makeServer()
66
clearWorkArea()
7-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
7+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
88
})
99
afterEach(function() {
1010
this.server.restore()
1111
clearWorkArea()
12-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
12+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
1313
})
1414

1515
it('navigation should replace an element into the cache when true', function() {
@@ -21,7 +21,7 @@ describe('hx-replace-url attribute', function() {
2121
div.click()
2222
this.server.respond()
2323
getWorkArea().textContent.should.equal('second')
24-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
24+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
2525
cache[cache.length - 1].url.should.equal('/test')
2626
})
2727

@@ -35,7 +35,7 @@ describe('hx-replace-url attribute', function() {
3535
div1.click()
3636
this.server.respond()
3737
div1.innerHTML.should.equal('Result')
38-
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
38+
var cache = JSON.parse(sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME))
3939
cache.length.should.equal(1)
4040
path.should.equal('/pushpath')
4141
htmx.off('htmx:replacedInHistory', handler)

‎test/core/perf.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ describe('Core htmx perf Tests', function() {
55
beforeEach(function() {
66
this.server = makeServer()
77
clearWorkArea()
8-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
8+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
99
})
1010
afterEach(function() {
1111
this.server.restore()
1212
clearWorkArea()
13-
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
13+
sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
1414
})
1515

1616
function stringRepeat(str, num) {
@@ -39,8 +39,8 @@ describe('Core htmx perf Tests', function() {
3939
}
4040
var start = performance.now()
4141
var string = JSON.stringify(array)
42-
localStorage.setItem(HTMX_HISTORY_CACHE_NAME, string)
43-
var reReadString = localStorage.getItem(HTMX_HISTORY_CACHE_NAME)
42+
sessionStorage.setItem(HTMX_HISTORY_CACHE_NAME, string)
43+
var reReadString = sessionStorage.getItem(HTMX_HISTORY_CACHE_NAME)
4444
var finalJson = JSON.parse(reReadString)
4545
var end = performance.now()
4646
var timeInMs = end - start

‎test/manual/history/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<script>
88
htmx.on("htmx:beforeHistorySave", function(evt){
99
console.log("Saving history : ", evt.detail);
10-
console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache")))
10+
console.log("History Cache Before:", JSON.parse(sessionStorage.getItem("htmx-history-cache")))
1111
setTimeout(function () {
12-
console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache")))
12+
console.log("History Cache After:", JSON.parse(sessionStorage.getItem("htmx-history-cache")))
1313
}, 10);
1414
})
1515
</script>

‎test/manual/history_regression/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<script>
77
htmx.on("htmx:beforeHistorySave", function(evt){
88
console.log("Saving history : ", evt.detail);
9-
console.log("History Cache Before:", JSON.parse(localStorage.getItem("htmx-history-cache")))
9+
console.log("History Cache Before:", JSON.parse(sessionStorage.getItem("htmx-history-cache")))
1010
setTimeout(function () {
11-
console.log("History Cache After:", JSON.parse(localStorage.getItem("htmx-history-cache")))
11+
console.log("History Cache After:", JSON.parse(sessionStorage.getItem("htmx-history-cache")))
1212
}, 10);
1313
})
1414
</script>

0 commit comments

Comments
 (0)