如果您想了解javascript-Localstorage:使用Stringify更改特定数组的值的相关知识,那么本文是一篇不可错过的文章,我们将对localstorage存js数组进行全面详尽的解释
如果您想了解javascript-Localstorage:使用Stringify更改特定数组的值的相关知识,那么本文是一篇不可错过的文章,我们将对localstorage存js数组进行全面详尽的解释,并且为您提供关于JavaScript LocalStorage 时效是否过期判断、Javascript localStorage 的简单使用、JavaScript localStorage值的最大大小是多少?、JavaScript toString、String和stringify方法区别的有价值的信息。
本文目录一览:- javascript-Localstorage:使用Stringify更改特定数组的值(localstorage存js数组)
- JavaScript LocalStorage 时效是否过期判断
- Javascript localStorage 的简单使用
- JavaScript localStorage值的最大大小是多少?
- JavaScript toString、String和stringify方法区别
javascript-Localstorage:使用Stringify更改特定数组的值(localstorage存js数组)
我不知道问题是否非常准确,但是我正在尝试从localstorage数组更改值.
这是我的本地存储的样子:
[{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}]
关键是“结果”.
如何为id:item-6,href:设置项目.例如.项目6,href是asos.com.如何将更改设置为stackoverflow.com?
我认为这将是这样的:
localStorage.setItem("result", JSON.stringify( ??? ));
编辑:
我已经实现了从本地存储中检索数据:
这是工作的小提琴:http://jsfiddle.net/kZN4y/.使用相同的编码,我想更新update click中提到的值.那可能吗?
谢谢
解决方法:
就个人而言,我会毫不犹豫地创建处理整个对象的函数,在您的情况下,例如:
var blob = [{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}];
// define helper functions
Storage.prototype.setBlob = function (blob)
{
for (i in blob) {
// example of storageObjet: {'item-3': {'href': 'google.com', 'icon': 'google.png'}}
var struct={};
for (key in blob[i]) {
if (key != 'id') {
struct[key] = blob[i][key];
}
};
this.setobject(blob[i].id, struct);
}
}
Storage.prototype.setobject = function(key, obj) {
this.setItem( key, JSON.stringify(obj) );
};
Storage.prototype.getobject = function(key) {
return JSON.parse(this.getItem(key));
};
// do stuff
sessionStorage.clear();
sessionStorage.setBlob(blob);
var key = 'item-6';
var item = sessionStorage.getobject(key);
item.href = 'stackoverflow.com';
sessionStorage.setobject(key, item);
for (key in sessionStorage) {
if (typeof(sessionStorage[key]) == 'string') {
var item2 = sessionStorage.getobject(key);
$('#stuff').append( $('<div>').html(item2.href) );
}
}
check this jsfiddle
注意:在此示例中,我使用sessionStorage代替localStorage,但是接口相同,都使用Storage原型.
如您所见,我将每个项目的结构更改为以下形式:{‘item-3’:{‘href’:’google.com’,’icon’:’google.png’}}.我这样做是因为它更好地反映了javascript,localStorage和键/值方式的整体概念,并大大简化了用法.
在此示例中,您有:
var item = sessionStorage.getobject(key);
item.href = 'stackoverflow.com';
sessionStorage.setobject(key, item);
这对我来说似乎是一种非常实用的处理localStorage的方法.
此外,“ setBlob”功能可以处理每个项目随机和可变数量的元素.如果需要,这允许您拥有一个具有5个属性的项目,而其他所有项目具有2个属性.只要有一个用键“ id”调用的元素,它就可以与“扁平”结构一起使用.
编辑:调试,并切换到一个更经典的setValue(key,item);
JavaScript LocalStorage 时效是否过期判断
<!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">
<title>localStorage.</title>
<script type="text/javascript">
// 关于localStorage过期时间设置
var obj = new Object();
obj.a = a;
obj.time = 3600;
obj.date = new Date().getTime();
// 储存到localStorage.
localStorage.setItem(''data'', JSON.stringify(obj));
// 取值
var b = JSON.parse(localStorage.getItem(''data''));
var tiem = b.time;
var data = b.date;
if ((parseInt(time) + parseInt(data)) < new Date().getTime()) {
// 如果小于说明数据时效已经过了,可以清除了....
localStorage.remove(''data'');
} else {
// 如果大于说明数据还有效
console.log(b.a);
}
</script>
</head>
<body>
</body>
</html>
Javascript localStorage 的简单使用
Javascript 中我们可以使用 localStorage 来保存我们的输入框数据,这样在刷新或者提交出错的时候不会出现信息丢失。 这里主要是这两个方法 setitem() 与getItem() 来操作 localStorage 的数据,还有一个是 clear 用来清空 localStorage 的数据。
下面就来举个简单的例子,先看html代码
<input type="text" value="" />
<button type="button" onclick="myButtonClicked(''text1'')">Click Me</button>
<input type="text" value="" />
<button type="button" onclick="myButtonClicked(''text2'')">Click Me</button>
这里有两个按钮和两个输入框;现在我们就来使用 localStorage 的数据存储来保存数据吧。
//在点击按钮的时候储存信息
function myButtonClicked(id)
{
var aLocalStorage = [];
if(localStorage.getItem(''myLocalStorage'') != null)
{
aLocalStorage = JSON.parse(localStorage.getItem(''myLocalStorage''));
//get stored item from localStorage by json parsing
}
aLocalStorage.push(id);
aLocalStorage.push(document.getElementById(id).value);
localStorage.setItem(''myLocalStorage'', JSON.stringify(aLocalStorage));
//stored the entered element id and value in localStorage by doing stringify
}
当页面重新加载时,我们需要把储存的数据放回到文本框
$(document).ready(function()
{
retainValues();
});
function retainValues()
{
if(localStorage.getItem(''myLocalStorage'') != null) {
var aLocalStorage =[];
aLocalStorage = JSON.parse(localStorage.getItem(''myLocalStorage''));
var i = 0;
while (i < aLocalStorage.length)
{
if (document.getElementById(aLocalStorage[i]) != null) {
document.getElementById(aLocalStorage[i]).value = aLocalStorage[i+1];
}
i = i + 2;
}
}
}
JavaScript localStorage值的最大大小是多少?
如何解决JavaScript localStorage值的最大大小是多少??
引用有关Web存储的Wikipedia文章:
可以简单地将网络存储视为Cookie的一种改进,它提供了更大的存储容量(Google Chrome中每个原始站点10 MB,Mozilla Firefox和Opera;在Internet Explorer中每个存储区10 MB)和更好的编程界面。
并且引用了John Resig的文章 [2007年1月发布]:
暗示,使用DOM存储,你具有比对Cookie施加的典型用户代理限制更大的存储空间。但是,提供的数量未在规范中定义,用户代理也没有有意义地广播。
如果你查看Mozilla源代码,我们可以看到5120KB是整个域的默认存储大小。与典型的2KB Cookie相比,这为你提供了更多的处理空间。
但是,该存储区的大小可以由用户自定义(因此,不能保证5MB的存储区,也没有暗示),并且用户代理(例如,Opera只能提供3MB,但只有时间能说明问题)。 )
解决方法
由于localStorage
(当前)仅支持将字符串作为值,并且为了做到这一点,需要先将对象进行字符串化(存储为JSON-
string),然后才可以定义值的长度。
有谁知道是否存在适用于所有浏览器的定义?
JavaScript toString、String和stringify方法区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript toString与String方法区别</title>
</head>
<body>
<script type="text/javascript">
//一 toString限制
// 报错Cannot read property ''toString'' of undefined
// console.log(undefined.toString())
// 报错Cannot read property ''toString'' of undefined
//console.log(null.toString())
//二 String无限制
console.log(String(undefined))
console.log(String(null))
//三 toString可根据进制编码
let num = 10;
console.log(num.toString(2))
</script>
</body>
</html>
二、stringify也可以实现字符串化,并且健壮性也良好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript toString、String和stringify方法区别</title>
</head>
<body>
<script type="text/javascript">
let a = {
age: undefined,
name: null
}
//输出 {"name":null}
console.log(JSON.stringify(a))
let b;
//输出 undefined
console.log(JSON.stringify(b));
let c = null;
//输出 null
console.log(JSON.stringify(c))
</script>
</body>
</html>
我们今天的关于javascript-Localstorage:使用Stringify更改特定数组的值和localstorage存js数组的分享就到这里,谢谢您的阅读,如果想了解更多关于JavaScript LocalStorage 时效是否过期判断、Javascript localStorage 的简单使用、JavaScript localStorage值的最大大小是多少?、JavaScript toString、String和stringify方法区别的相关信息,可以在本站进行搜索。
本文标签: