Menu
Community /Pin to ProfileBookmark
@daveyerwinJul 10.2019 — #when I ran your code in firefox
i got this result ...
test_12 => Lorem ipsum_22
test_11 => Lorem ipsum_21
test_16 => Lorem ipsum_253
test_14 => Lorem ipsum_24
when I ran it in chrome ...
test_12 => Lorem ipsum_22
test_16 => Lorem ipsum_253
test_11 => Lorem ipsum_21
test_14 => Lorem ipsum_24
You cannot depend on the order
of localStorage keys
read this StackOverflow article ...
https://stackoverflow.com/questions/8340845/html5-localstorage-key-order
This is a little complicated but
it preserves the order
and displays in reverse order ...
@daveyerwinJul 17.2019 — #ie and the edge will not access local storage
from the local file system
it most be hosted on a server to work
chrome and firefox will work on the local file system @daveyerwinJul 17.2019 — #@DaveyErwin#1606397
here is work around
https://stackoverflow.com/questions/3392032/localstorage-object-is-undefined-in-ie @daveyerwinJul 17.2019 — #@Sempervivum#1606398
from the web site you posted under
known issues
IE10 in Windows 8 has an issue where localStorage can fail with the error message "SCRIPT5: Access is denied" if "integrity" settings are not set correctly.@daveyerwinJul 17.2019 — #@daveyerwinJul 17.2019 — #https://stackoverflow.com/questions/32253411/microsoft-edge-local-session-storage-are-not-working-in-a-new-tabwin#1606404 @daveyerwinJul 18.2019 — #
Display localstorage outpu in reverse order
I’m stored in localStorage as Input below and i want to display in reverse order as output below
**Input Data
test_11 => Lorem ipsum_21
test_12 => Lorem ipsum_22
test_16 => Lorem ipsum_2563
test_14 => Lorem ipsum_24
**My output to display as below
test_14 => Lorem ipsum_24
test_16 => Lorem ipsum_2563
test_12 => Lorem ipsum_22
test_11 => Lorem ipsum_21
**below is my code
[code]<!DOCTYPE html>
<html>
<body>
<h1>The set the local Storage</h1>
<button onclick=”createItem()”>Set session storage item</button>
<h2>Get the value</h2>
<p>Click the button to get the item value:</p>
<button onclick=”readValue()”>Get the item value</button>
<br/>
<textarea rows=”10″ cols=”60″ id=’reports’>
</textarea>
<script>
function createItem() {
localStorage.setItem(“test_11”, “Lorem ipsum_21”);
localStorage.setItem(“test_12”, “Lorem ipsum_22”);
localStorage.setItem(“test_16”, “Lorem ipsum_253”);
localStorage.setItem(“test_14”, “Lorem ipsum_24”);
}
function readValue() {
var ele = document.getElementById(“reports”);
for (var x = 0; x < localStorage.length; x++) {
var key = localStorage.key(x);
var value = localStorage.getItem(key);
ele.innerHTML += (key + ” => ” + value) + “n”;
}
}
</script>
</body>
</html>
Edited by site staff: Inserted code tags.
Sign in
to post a comment13 Comments(s) ↴
0
@daveyerwinJul 10.2019 — #when I ran your code in firefoxi got this result ...
test_12 => Lorem ipsum_22
test_11 => Lorem ipsum_21
test_16 => Lorem ipsum_253
test_14 => Lorem ipsum_24
when I ran it in chrome ...
test_12 => Lorem ipsum_22
test_16 => Lorem ipsum_253
test_11 => Lorem ipsum_21
test_14 => Lorem ipsum_24
You cannot depend on the order
of localStorage keys
read this StackOverflow article ...
This is a little complicated but
it preserves the order
and displays in reverse order ...
``<i>
</i><!DOCTYPE html>
<html>
<body>
<h1>The set the local Storage</h1>
<button onclick="createItem()">Set session storage item</button>
<h2>Get the value</h2>
<p>Click the button to get the item value:</p>
<button onclick="readValue()">Get the item value</button>
<br/>
<textarea rows="10" cols="60" id='reports'>
</textarea>
<script>
/******this is for testing****/
localStorage.clear();
/***remove this to persist data***/
var myStorage={
Items : [],
setItem : function(key,value){
var obj = {}; obj [key] = value;
this.Items.push(obj);
localStorage.setItem('myStorage',JSON.stringify(this))
}
}
function createItem() {
myStorage.setItem("test_11", "Lorem ipsum_21");
myStorage.setItem("test_12", "Lorem ipsum_22");
myStorage.setItem("test_16", "Lorem ipsum_24");
myStorage.setItem("test_14", "Lorem ipsum_253");
}
function readValue() {
var ele = document.getElementById("reports");
var stored = JSON.parse(localStorage.getItem('myStorage'),true).Items;
for (var i = stored.length; i ; i--) {
var obj = stored[i-1];
var key = Object.keys(obj)[0];
var value = (obj)[key];
ele.innerHTML += (key + " => " + value) + "n";
}
}
</script>
</body>
</html><i>
</i>``0
@daveyerwinJul 17.2019 — #from the local file system
it most be hosted on a server to work
chrome and firefox will work on the local file system
0
@daveyerwinJul 17.2019 — #here is work around
0
@daveyerwinJul 17.2019 — #from the web site you posted under
known issues
IE10 in Windows 8 has an issue where localStorage can fail with the error message "SCRIPT5: Access is denied" if "integrity" settings are not set correctly.
0
@daveyerwinJul 17.2019 — #``<i>
</i><!DOCTYPE html>
<html>
<body>
<h1>The set the local Storage</h1>
<button onclick="createItem()">Set session storage item</button>
<h2>Get the value</h2>
<p>Click the button to get the item value:</p>
<button onclick="readValue()">Get the item value</button>
<br/>
<textarea rows="10" cols="60" id='reports'>
</textarea>
<script>
/******this is for testing****/
localStorage.clear();
/***remove this to persist data***/
var myStorage={
Items : [],
setItem : function(key,value){
var obj = {}; obj [key] = value;
this.Items.push(obj);
localStorage.setItem('myStorage',JSON.stringify(this))
}
}
function createItem() {
myStorage.setItem("test_11", "Lorem ipsum_21");
myStorage.setItem("jest_12", "Lorem ipsum_22");
myStorage.setItem("rest_16", "Lorem ipsum_24");
myStorage.setItem("best_14", "Lorem ipsum_253");
}
function readValue() {
var ele = document.getElementById("reports");
var stored = JSON.parse(localStorage.getItem('myStorage'),true).Items;
for (var i = stored.length; i ; i--) {
var obj = stored[i-1];
var key = Object.keys(obj)[0];
var value = (obj)[key];
if (key.split('_')[0] === 'test')
ele.innerHTML += (key + " => " + value) + "n";
}
}
</script>
</body>
</html><i>
</i>``0
@daveyerwinJul 17.2019 — #0
@daveyerwinJul 18.2019 — #``<i>
</i><!DOCTYPE html>
<html>
<link rel="stylesheet" href="pagination.css" type="text/css" />
<body>
<h4>The set the local Storage</h4>
<button onclick="createItem()">Set local storage items</button>
<button onclick="myStorage.clearMyStorage()"> Clear myStorage </button>
<button onclick="listItems()"> list all Items </button>
<button onclick="listItems(0,3)"> list first three Items </button>
<button onclick="listItems(3,3)"> list Items four five and six</button>
<ul id=list></list>
<script>
function createItem() {
myStorage.setItem("test_11", "Display values-21");
myStorage.setItem("test_12", "Display values-22");
myStorage.setItem("test_16", "Display values-24");
myStorage.setItem("test_14", "Display values-253");
myStorage.setItem("test_15", "Display values-2423");
myStorage.setItem("test_21", "Display values-21");
myStorage.setItem("test_25", "Display values-25");
myStorage.setItem("test_01", "Display values-01");
myStorage.setItem("test_051","Display values-051");
myStorage.setItem("test_31", "Display values-31");
}
function listItems(start,end){
while (list.hasChildNodes())
list.removeChild(list.lastChild);
var i=0,item,keys=myStorage.getKeys();
if(arguments.length == 0){
while(item = myStorage.getItem(keys[i++]))
list.appendChild(document.createElement("li")).
appendChild(document.createTextNode(item));
} else {
i = start;
while(item = myStorage.getItem(keys[i++])){
if(i>end+start)return
list.appendChild(document.createElement("li")).
appendChild(document.createTextNode(item));}
}
}
var myStorage = (function () {
var stored = JSON.parse(localStorage.getItem('myStorage'),true),
Items = stored ? stored:{},
current = 0;
function set(){localStorage.setItem('myStorage',JSON.stringify(Items))};
return {
setItem : function(key,value){
if(!value)return;
Items [key] = value ;
set();
},
getItem : function(key) {
return Items [key];
},
getKeys : function() {
return Object.keys(Items);
},
clearItem : function(key){
delete Items [key];
set();
},
clearMyStorage: function() {
Items = {};
set();
},
}}());
</script>
</body>
</html><i>
</i>``