HTML5 localStorage에 개체를 저장하는 방법
JavaScript에 JavaScript localStorage오브젝트가 문자열로 변환되고 있는 것 같습니다.
JavaScript를 사용하여 및 및 할 수 .localStorage이치노★★★★★★★★★★★★★★★★★?
제 코드는 다음과 같습니다.
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
console.log(' ' + prop + ': ' + testObject[prop]);
}
// Put the object into storage
localStorage.setItem('testObject', testObject);
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);
콘솔 출력은 다음과 같습니다.
typeof testObject: object
testObject properties:
one: 1
two: 2
three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]
가 엔 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.setItem메서드는 입력을 저장하기 전에 문자열로 변환합니다.
이 동작은 Safari, Chrome, Firefox에서 볼 수 있기 때문에 브라우저 고유의 버그나 제한이 아니라 HTML5 Web Storage 사양에 대한 저의 오해라고 생각합니다.
2 공통 인프라스트럭처에 기재되어 있는 구조화 클론 알고리즘을 이해하려고 했습니다.무슨 말인지 잘 모르겠지만, 내 문제는 내 개체의 속성이 열거되지 않는 것과 관련이 있을 수 있습니다.?).
간단한 해결 방법이 있습니까?
업데이트: W3C는 구조화 클론 사양에 대한 생각을 바꿔 구현에 맞게 사양을 변경하기로 결정했습니다.12111 - 스토리지 오브젝트의 getItem(key) 메서드가 구현 동작과 일치하지 않는 사양.따라서 이 질문은 더 이상 100% 유효하지는 않지만, 답은 여전히 흥미로울 수 있습니다.
Apple, Mozilla 및 Mozilla 문서를 다시 보면 문자열 키/값 쌍만 처리하도록 기능이 제한되어 있는 것 같습니다.
회피책은 오브젝트를 저장하기 전에 스트링을 지정하고 나중에 취득할 때 해석하는 것입니다.
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));
변종에 대한 약간의 개선점:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
단락 평가 때문에getObject()즉시 돌아오다nullkey스토리지에 없습니다., ,, 능, 능, 기, 기, a, a, it, it, it, .SyntaxErrorvalue"" 문자열; (빈 문자열;)JSON.parse()감당할 수 없습니다.)
다음과 같은 편리한 방법으로 스토리지 개체를 확장하는 것이 유용할 수 있습니다.
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
이렇게 하면 API 아래에서 문자열만 지원하더라도 원하는 기능을 얻을 수 있습니다.
스토리지 객체의 외관을 만드는 것은 훌륭한 솔루션입니다.만의 '자신의 것', '자신의 것'을 할 수 있습니다.get ★★★★★★★★★★★★★★★★★」setAPI를 위해 localStorage의 파사드를 작성한 후 설정 및 취득 중에 오브젝트 여부를 확인합니다.
var data = {
set: function(key, value) {
if (!key || !value) {return;}
if (typeof value === "object") {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
},
get: function(key) {
var value = localStorage.getItem(key);
if (!value) {return;}
// assume it is an object that has been stringified
if (value[0] === "{") {
value = JSON.parse(value);
}
return value;
}
}
Stringify로 모든 문제가 해결되는 것은 아닙니다.
이 답변에는 JavaScript에서 가능한 모든 유형이 포함되어 있지 않은 것 같습니다.따라서 이 답변들을 올바르게 처리하는 방법에 대한 몇 가지 간단한 예를 제시하겠습니다.
// Objects and Arrays:
var obj = {key: "value"};
localStorage.object = JSON.stringify(obj); // Will ignore private members
obj = JSON.parse(localStorage.object);
// Boolean:
var bool = false;
localStorage.bool = bool;
bool = (localStorage.bool === "true");
// Numbers:
var num = 42;
localStorage.num = num;
num = +localStorage.num; // Short for "num = parseFloat(localStorage.num);"
// Dates:
var date = Date.now();
localStorage.date = date;
date = new Date(parseInt(localStorage.date));
// Regular expressions:
var regex = /^No\.[\d]*$/i; // Usage example: "No.42".match(regex);
localStorage.regex = regex;
var components = localStorage.regex.match("^/(.*)/([a-z]*)$");
regex = new RegExp(components[1], components[2]);
// Functions (not recommended):
function func() {}
localStorage.func = func;
eval(localStorage.func); // Recreates the function with the name "func"
기능을 저장하는 것은 권장하지 않습니다.eval()보안, 최적화 및 디버깅에 관한 문제로 이어질 수 있습니다.
으로는, 「 」입니다.eval()JavaScript java java java 。
개인 회원
「 」를 JSON.stringify()이 함수는 개인 멤버를 시리얼화할 수 없습니다.
는 이 문제를 것으로 할 수 ..toString() 스토리지에 할 때
// Object with private and public members:
function MyClass(privateContent, publicContent) {
var privateMember = privateContent || "defaultPrivateValue";
this.publicMember = publicContent || "defaultPublicValue";
this.toString = function() {
return '{"private": "' + privateMember + '", "public": "' + this.publicMember + '"}';
};
}
MyClass.fromString = function(serialisedString) {
var properties = JSON.parse(serialisedString || "{}");
return new MyClass(properties.private, properties.public);
};
// Storing:
var obj = new MyClass("invisible", "visible");
localStorage.object = obj;
// Loading:
obj = MyClass.fromString(localStorage.object);
순환 참조
하나의 문제stringify" " " " " : "
var obj = {};
obj["circular"] = obj;
localStorage.object = JSON.stringify(obj); // Fails
예에서는 " " 입니다.JSON.stringify()TypeError "원형 구조를 JSON으로 변환 중"
되고 있는 는, 「」의 해 주세요.JSON.stringify()사용할 수 있습니다.
var obj = {id: 1, sub: {}};
obj.sub["circular"] = obj;
localStorage.object = JSON.stringify(obj, function(key, value) {
if(key == 'circular') {
return "$ref" + value.id + "$";
} else {
return value;
}
});
그러나 순환 참조를 저장하기 위한 효율적인 솔루션을 찾는 것은 해결해야 할 태스크에 따라 달라지며, 이러한 데이터를 복원하는 것도 간단한 일이 아닙니다.
이 문제를 다루는 스택오버플로우에는 이미 몇 가지 질문이 있습니다.순환 참조를 사용하여 JavaScript 개체 문자열 지정(JSON으로 변환)
jStorage라고 하는 오래된 브라우저까지 지원하도록 많은 솔루션을 정리한 훌륭한 라이브러리가 있습니다.
개체를 설정할 수 있습니다.
$.jStorage.set(key, value)
쉽게 복구할 수 있습니다.
value = $.jStorage.get(key)
value = $.jStorage.get(key, "default value")
이 게시물은 'local storage에 어레이를 저장하는 방법'이라는 제목의 이 게시물의 복제품으로 마감된 다른 게시물을 보고 이 게시물에 도착했습니다.어느 스레드도 실제로는 local Storage에서 어레이를 유지하는 방법에 대한 완전한 답변을 얻을 수 없지만, 저는 두 스레드에 포함된 정보를 바탕으로 솔루션을 구축했습니다.
어레이 내의 아이템을 푸시/팝/시프트 할 수 있는 다른 사용자가 해당 어레이를 localStorage 또는 sessionStorage에 저장하기를 원하는 경우 다음과 같이 하십시오.
Storage.prototype.getArray = function(arrayName) {
var thisArray = [];
var fetchArrayObject = this.getItem(arrayName);
if (typeof fetchArrayObject !== 'undefined') {
if (fetchArrayObject !== null) { thisArray = JSON.parse(fetchArrayObject); }
}
return thisArray;
}
Storage.prototype.pushArrayItem = function(arrayName,arrayItem) {
var existingArray = this.getArray(arrayName);
existingArray.push(arrayItem);
this.setItem(arrayName,JSON.stringify(existingArray));
}
Storage.prototype.popArrayItem = function(arrayName) {
var arrayItem = {};
var existingArray = this.getArray(arrayName);
if (existingArray.length > 0) {
arrayItem = existingArray.pop();
this.setItem(arrayName,JSON.stringify(existingArray));
}
return arrayItem;
}
Storage.prototype.shiftArrayItem = function(arrayName) {
var arrayItem = {};
var existingArray = this.getArray(arrayName);
if (existingArray.length > 0) {
arrayItem = existingArray.shift();
this.setItem(arrayName,JSON.stringify(existingArray));
}
return arrayItem;
}
Storage.prototype.unshiftArrayItem = function(arrayName,arrayItem) {
var existingArray = this.getArray(arrayName);
existingArray.unshift(arrayItem);
this.setItem(arrayName,JSON.stringify(existingArray));
}
Storage.prototype.deleteArray = function(arrayName) {
this.removeItem(arrayName);
}
사용 예 - localStorage 배열에 단순 문자열을 저장합니다.
localStorage.pushArrayItem('myArray','item one');
localStorage.pushArrayItem('myArray','item two');
사용 예 - session에 개체 저장스토리지 배열:
var item1 = {}; item1.name = 'fred'; item1.age = 48;
sessionStorage.pushArrayItem('myArray',item1);
var item2 = {}; item2.name = 'dave'; item2.age = 22;
sessionStorage.pushArrayItem('myArray',item2);
일반적인 어레이 조작 방법:
.pushArrayItem(arrayName,arrayItem); -> adds an element onto end of named array
.unshiftArrayItem(arrayName,arrayItem); -> adds an element onto front of named array
.popArrayItem(arrayName); -> removes & returns last array element
.shiftArrayItem(arrayName); -> removes & returns first array element
.getArray(arrayName); -> returns entire array
.deleteArray(arrayName); -> removes entire array from storage
이론적으로 다음과 같은 기능을 가진 객체를 저장할 수 있습니다.
function store (a)
{
var c = {f: {}, d: {}};
for (var k in a)
{
if (a.hasOwnProperty(k) && typeof a[k] === 'function')
{
c.f[k] = encodeURIComponent(a[k]);
}
}
c.d = a;
var data = JSON.stringify(c);
window.localStorage.setItem('CODE', data);
}
function restore ()
{
var data = window.localStorage.getItem('CODE');
data = JSON.parse(data);
var b = data.d;
for (var k in data.f)
{
if (data.f.hasOwnProperty(k))
{
b[k] = eval("(" + decodeURIComponent(data.f[k]) + ")");
}
}
return b;
}
그러나 함수의 시리얼화/디시리얼화는 구현에 의존하기 때문에 신뢰할 수 없습니다.
여기서 설명하는 많은 기능 및 호환성을 높이기 위해 추상화 라이브러리를 사용하는 것이 좋습니다.다양한 옵션이 있습니다.
- jStorage 또는 simpleStorage ← 내 선호 사항
- local forage(로컬 사료)
- 알렉세이쿨리코프/스토리지
- 잔디 의자
- Store.js ← 다른 좋은 옵션
- 오마이갓
- local Data 스토리지
문자열 형식이 없으면 키 값을 저장할 수 없습니다.
LocalStorage는 키/값의 문자열 형식만 지원합니다.
따라서 데이터를 배열 또는 객체에 관계없이 문자열로 변환해야 합니다.
localStorage에 데이터를 저장하려면 먼저 JSON.stringify() 메서드를 사용하여 데이터를 문자열화합니다.
var myObj = [{name:"test", time:"Date 2017-02-03T08:38:04.449Z"}];
localStorage.setItem('item', JSON.stringify(myObj));
그런 다음 데이터를 가져올 때 문자열을 오브젝트에 다시 구문 분석해야 합니다.
var getObj = JSON.parse(localStorage.getItem('item'));
localDataStorage를 사용하여 JavaScript 데이터 유형(어레이, 부울, 날짜, 플로트, 정수, 문자열 및 개체)을 투명하게 저장할 수 있습니다.또한 경량 데이터 난독화, 문자열 자동 압축, 키(이름)에 의한 쿼리 및 키(키) 값에 의한 쿼리 용이화, 키 접두사에 의한 세그먼트 공유 스토리지 적용도 지원합니다.
[DISCLAIMER] 유틸리티의 저자 [/DISCLAIMER]
예:
localDataStorage.set( 'key1', 'Belgian' )
localDataStorage.set( 'key2', 1200.0047 )
localDataStorage.set( 'key3', true )
localDataStorage.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localDataStorage.set( 'key5', null )
localDataStorage.get( 'key1' ) // --> 'Belgian'
localDataStorage.get( 'key2' ) // --> 1200.0047
localDataStorage.get( 'key3' ) // --> true
localDataStorage.get( 'key4' ) // --> Object {RSK: Array(5)}
localDataStorage.get( 'key5' ) // --> null
보시다시피, 원시적인 가치는 존중됩니다.
ejson을 사용하여 개체를 문자열로 저장할 수 있습니다.
EJSON은 더 많은 유형을 지원하기 위한 JSON의 확장입니다.모든 JSON 세이프 타입과 다음 타입을 지원합니다.
- JavaScript)
Date)- )
Uint8Array또는 EJSON.newBinary 결과)- 사용자 정의 유형(EJSON.addType 참조).예를 들면 몽고.ObjectID는 이렇게 구현됩니다).
모든 EJSON 시리얼화는 유효한 JSON이기도 합니다.예를 들어 날짜와 바이너리 버퍼를 가진 오브젝트는 EJSON에서 다음과 같이 시리얼화됩니다.
{ "d": {"$date": 1358205756553}, "b": {"$binary": "c3VyZS4="} }
ejson을 사용한 localStorage 래퍼입니다.
https://github.com/UziTech/storage.js
래퍼에 정규 표현과 함수를 포함한 몇 가지 유형을 추가했습니다.
다른 옵션은 기존 플러그인을 사용하는 것입니다.
예를 들어 persisto는 localStorage/sessionStorage에 대한 간편한 인터페이스를 제공하고 양식 필드(입력, 라디오 버튼 및 확인란)의 지속성을 자동화하는 오픈 소스 프로젝트입니다.
(면책자:제가 작가입니다.)
TypeScript 사용자의 경우 입력된 속성을 설정 및 가져올 수 있습니다.
/**
* Silly wrapper to be able to type the storage keys
*/
export class TypedStorage<T> {
public removeItem(key: keyof T): void {
localStorage.removeItem(key);
}
public getItem<K extends keyof T>(key: K): T[K] | null {
const data: string | null = localStorage.getItem(key);
return JSON.parse(data);
}
public setItem<K extends keyof T>(key: K, value: T[K]): void {
const data: string = JSON.stringify(value);
localStorage.setItem(key, data);
}
}
사용 예:
// write an interface for the storage
interface MyStore {
age: number,
name: string,
address: {city:string}
}
const storage: TypedStorage<MyStore> = new TypedStorage<MyStore>();
storage.setItem("wrong key", ""); // error unknown key
storage.setItem("age", "hello"); // error, age should be number
storage.setItem("address", {city:"Here"}); // ok
const address: {city:string} = storage.getItem("address");
https://github.com/adrianmay/rhaboo은 다음과 같은 내용을 쓸 수 있는 localStorage 설탕 계층입니다.
var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
one: ['man', 'went'],
2: 'mow',
went: [ 2, { mow: ['a', 'meadow' ] }, {} ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');
JSON.stringify/parse를 사용하지 않습니다.이는 큰 객체에서는 정확하지 않고 속도가 느려지기 때문입니다.대신 각 터미널 값에는 고유한 localStorage 항목이 있습니다.
아마 제가 횡문과 관련이 있을 거라고 짐작하실 수 있을 거예요.
localStorage.setItem('obj',JSON.stringify({name:'Akash'})); // Set Object in localStorage
localStorage.getItem('obj'); // Get Object from localStorage
sessionStorage.setItem('obj',JSON.stringify({name:'Akash'})); // Set Object in sessionStorage
sessionStorage.getItem('obj'); // Get Object from sessionStorage
코드 20줄만 있는 미니멀리즘 포장지를 하나 더 만들었습니다.
localStorage.set('myKey',{a:[1,2,5], b: 'ok'});
localStorage.has('myKey'); // --> true
localStorage.get('myKey'); // --> {a:[1,2,5], b: 'ok'}
localStorage.keys(); // --> ['myKey']
localStorage.remove('myKey');
https://github.com/zevero/simpleWebstorage
기존 스토리지 오브젝트를 파손하지 않고 래퍼를 만들어 원하는 것을 할 수 있는 것을 만들었습니다.그 결과 일반 객체가 됩니다.메서드는 없습니다.다른 객체와 마찬가지로 액세스 할 수 있습니다.
을 원하시면 1을 원하시면localStorage다음 중 하나:
var prop = ObjectStorage(localStorage, 'prop');
여러 개 필요한 경우:
var storage = ObjectStorage(localStorage, ['prop', 'more', 'props']);
당신이 하는 모든 일prop또는 내부의 오브젝트 storage will will will will에 저장됩니다.localStorage항상 실제 물체를 가지고 놀기 때문에 다음과 같은 작업을 수행할 수 있습니다.
storage.data.list.push('more data');
storage.another.list.splice(1, 2, {another: 'object'});
추적 대상 객체 내의 모든 새로운 객체는 자동으로 추적됩니다.
가장 큰 단점은 다음과 같습니다.Object.observe()이치노파이어폭스나 엣지에도 가까운 시일 내에 출시될 것 같지는 않습니다.
순환 참조가 있는 물체에서 작동시킬 수 있는 방법을 찾았습니다.
순환 참조가 있는 객체를 만들어 봅시다.
obj = {
L: {
L: { v: 'lorem' },
R: { v: 'ipsum' }
},
R: {
L: { v: 'dolor' },
R: {
L: { v: 'sit' },
R: { v: 'amet' }
}
}
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;
수 없다JSON.stringify여, 、 순참 、 순조참때 。
LOCALSTORAGE.CYCLICJSON 있다.stringify ★★★★★★★★★★★★★★★★★」.parse 때와 JSONWorksparse(obj)를 "는 있습니다.", "Works"("Works")는 "Stringify(obj)"입니다.
단, 다음과 같은 단축키를 사용할 수 있습니다.
LOCALSTORAGE.setObject('latinUncles', obj)
recovered = LOCALSTORAGE.getObject('latinUncles')
ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ는,recoveredobj와 "의 "같다"가 .
[
obj.L.L.v === recovered.L.L.v,
obj.L.R.v === recovered.L.R.v,
obj.R.L.v === recovered.R.L.v,
obj.R.R.L.v === recovered.R.R.L.v,
obj.R.R.R.v === recovered.R.R.R.v,
obj.R.L.uncle === obj.L,
obj.R.R.uncle === obj.L,
obj.R.R.L.uncle === obj.R.L,
obj.R.R.R.uncle === obj.R.L,
obj.L.L.uncle === obj.R,
obj.L.R.uncle === obj.R,
recovered.R.L.uncle === recovered.L,
recovered.R.R.uncle === recovered.L,
recovered.R.R.L.uncle === recovered.R.L,
recovered.R.R.R.uncle === recovered.R.L,
recovered.L.L.uncle === recovered.R,
recovered.L.R.uncle === recovered.R
]
다음은 ', 하다, 하다'의 실행 내용입니다.LOCALSTORAGE
LOCALSTORAGE = (function(){
"use strict";
var ignore = [Boolean, Date, Number, RegExp, String];
function primitive(item){
if (typeof item === 'object'){
if (item === null) { return true; }
for (var i=0; i<ignore.length; i++){
if (item instanceof ignore[i]) { return true; }
}
return false;
} else {
return true;
}
}
function infant(value){
return Array.isArray(value) ? [] : {};
}
function decycleIntoForest(object, replacer) {
if (typeof replacer !== 'function'){
replacer = function(x){ return x; }
}
object = replacer(object);
if (primitive(object)) return object;
var objects = [object];
var forest = [infant(object)];
var bucket = new WeakMap(); // bucket = inverse of objects
bucket.set(object, 0);
function addToBucket(obj){
var result = objects.length;
objects.push(obj);
bucket.set(obj, result);
return result;
}
function isInBucket(obj){ return bucket.has(obj); }
function processNode(source, target){
Object.keys(source).forEach(function(key){
var value = replacer(source[key]);
if (primitive(value)){
target[key] = {value: value};
} else {
var ptr;
if (isInBucket(value)){
ptr = bucket.get(value);
} else {
ptr = addToBucket(value);
var newTree = infant(value);
forest.push(newTree);
processNode(value, newTree);
}
target[key] = {pointer: ptr};
}
});
}
processNode(object, forest[0]);
return forest;
};
function deForestIntoCycle(forest) {
var objects = [];
var objectRequested = [];
var todo = [];
function processTree(idx) {
if (idx in objects) return objects[idx];
if (objectRequested[idx]) return null;
objectRequested[idx] = true;
var tree = forest[idx];
var node = Array.isArray(tree) ? [] : {};
for (var key in tree) {
var o = tree[key];
if ('pointer' in o) {
var ptr = o.pointer;
var value = processTree(ptr);
if (value === null) {
todo.push({
node: node,
key: key,
idx: ptr
});
} else {
node[key] = value;
}
} else {
if ('value' in o) {
node[key] = o.value;
} else {
throw new Error('unexpected')
}
}
}
objects[idx] = node;
return node;
}
var result = processTree(0);
for (var i = 0; i < todo.length; i++) {
var item = todo[i];
item.node[item.key] = objects[item.idx];
}
return result;
};
var console = {
log: function(x){
var the = document.getElementById('the');
the.textContent = the.textContent + '\n' + x;
},
delimiter: function(){
var the = document.getElementById('the');
the.textContent = the.textContent +
'\n*******************************************';
}
}
function logCyclicObjectToConsole(root) {
var cycleFree = decycleIntoForest(root);
var shown = cycleFree.map(function(tree, idx) {
return false;
});
var indentIncrement = 4;
function showItem(nodeSlot, indent, label) {
var leadingSpaces = ' '.repeat(indent);
var leadingSpacesPlus = ' '.repeat(indent + indentIncrement);
if (shown[nodeSlot]) {
console.log(leadingSpaces + label + ' ... see above (object #' + nodeSlot + ')');
} else {
console.log(leadingSpaces + label + ' object#' + nodeSlot);
var tree = cycleFree[nodeSlot];
shown[nodeSlot] = true;
Object.keys(tree).forEach(function(key) {
var entry = tree[key];
if ('value' in entry) {
console.log(leadingSpacesPlus + key + ": " + entry.value);
} else {
if ('pointer' in entry) {
showItem(entry.pointer, indent + indentIncrement, key);
}
}
});
}
}
console.delimiter();
showItem(0, 0, 'root');
};
function stringify(obj){
return JSON.stringify(decycleIntoForest(obj));
}
function parse(str){
return deForestIntoCycle(JSON.parse(str));
}
var CYCLICJSON = {
decycleIntoForest: decycleIntoForest,
deForestIntoCycle : deForestIntoCycle,
logCyclicObjectToConsole: logCyclicObjectToConsole,
stringify : stringify,
parse : parse
}
function setObject(name, object){
var str = stringify(object);
localStorage.setItem(name, str);
}
function getObject(name){
var str = localStorage.getItem(name);
if (str===null) return null;
return parse(str);
}
return {
CYCLICJSON : CYCLICJSON,
setObject : setObject,
getObject : getObject
}
})();
obj = {
L: {
L: { v: 'lorem' },
R: { v: 'ipsum' }
},
R: {
L: { v: 'dolor' },
R: {
L: { v: 'sit' },
R: { v: 'amet' }
}
}
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;
// LOCALSTORAGE.setObject('latinUncles', obj)
// recovered = LOCALSTORAGE.getObject('latinUncles')
// localStorage not available inside fiddle ):
LOCALSTORAGE.CYCLICJSON.logCyclicObjectToConsole(obj)
putIntoLS = LOCALSTORAGE.CYCLICJSON.stringify(obj);
recovered = LOCALSTORAGE.CYCLICJSON.parse(putIntoLS);
LOCALSTORAGE.CYCLICJSON.logCyclicObjectToConsole(recovered);
var the = document.getElementById('the');
the.textContent = the.textContent + '\n\n' +
JSON.stringify(
[
obj.L.L.v === recovered.L.L.v,
obj.L.R.v === recovered.L.R.v,
obj.R.L.v === recovered.R.L.v,
obj.R.R.L.v === recovered.R.R.L.v,
obj.R.R.R.v === recovered.R.R.R.v,
obj.R.L.uncle === obj.L,
obj.R.R.uncle === obj.L,
obj.R.R.L.uncle === obj.R.L,
obj.R.R.R.uncle === obj.R.L,
obj.L.L.uncle === obj.R,
obj.L.R.uncle === obj.R,
recovered.R.L.uncle === recovered.L,
recovered.R.R.uncle === recovered.L,
recovered.R.R.L.uncle === recovered.R.L,
recovered.R.R.R.uncle === recovered.R.L,
recovered.L.L.uncle === recovered.R,
recovered.L.R.uncle === recovered.R
]
)<pre id='the'></pre>이 은 JavaScript만의되었으며, 다른 "JavaScript" 둘 다 "JavaScript"라는 점에 .localStorage.getItem ★★★★★★★★★★★★★★★★★」localStorage.setItem 오브젝트 개념은 없습니다.이것들은 문자열과 문자열만 처리합니다.이 답변은 JavaScript 전용 솔루션에서 다른 shavesuged를 통합한 TypeScript 친화적인 솔루션을 제공합니다.
타입 스크립트 4.2.3
Storage.prototype.setObject = function (key: string, value: unknown) {
this.setItem(key, JSON.stringify(value));
};
Storage.prototype.getObject = function (key: string) {
const value = this.getItem(key);
if (!value) {
return null;
}
return JSON.parse(value);
};
declare global {
interface Storage {
setObject: (key: string, value: unknown) => void;
getObject: (key: string) => unknown;
}
}
사용.
localStorage.setObject('ages', [23, 18, 33, 22, 58]);
localStorage.getObject('ages');
설명.
다 합니다.setObject ★★★★★★★★★★★★★★★★★」getObject에서의 Storage (프로토타입:localStorage는 이 유형의 인스턴스입니다.해야 할 도 없습니다. 늘의 늘 이외에는요.getObject .부터getItem할 수 있다null를 걸었으니까 JSON.parse null exceptionvalue를 .
의 한 후Storage그 the the the the the the prototype prototype prototype prototype prototype prototype 、 prototype prototype prototype prototype prototype prototype prototype 。Storage이치노
주의:함수로 는 항상 해야 .localStorage이치노를 들어, 위의 는 를, 음, 음, 음, 음, 음, 음,setObject ★★★★★★★★★★★★★★★★★」getObject합니다.sessionStorage뿐만 아니라.
또한 로컬 스토리지에서 삭제 값을 구현하고 Getter 및 Setter 계층을 추가하는 방법을 보여 줍니다.
localstorage.setItem(preview, true)
쓸 수 있다
config.preview = true
자, 여기 있습니다.
var PT=Storage.prototype
if (typeof PT._setItem >='u')
PT._setItem = PT.setItem;
PT.setItem = function(key, value)
{
if (typeof value >='u') //..undefined
this.removeItem(key)
else
this._setItem(key, JSON.stringify(value));
}
if (typeof PT._getItem >='u')
PT._getItem = PT.getItem;
PT.getItem = function(key)
{
var ItemData = this._getItem(key)
try
{
return JSON.parse(ItemData);
}
catch(e)
{
return ItemData;
}
}
// Aliases for localStorage.set/getItem
get = localStorage.getItem.bind(localStorage)
set = localStorage.setItem.bind(localStorage)
// Create ConfigWrapperObject
var config = {}
// Helper to create getter & setter
function configCreate(PropToAdd){
Object.defineProperty( config, PropToAdd, {
get: function () { return (get(PropToAdd) )},
set: function (val) { set(PropToAdd, val)}
})
}
//------------------------------
// Usage Part
// Create properties
configCreate('preview')
configCreate('notification')
//...
// Configuration Data transfer
// Set
config.preview = true
// Get
config.preview
// Delete
config.preview = undefined
,..bind(...)그래도 너무 좋아서 넣었어요.는 몇 를 알아냈다.get = localStorage.getItem;작동하지 않습니다.
순환 참조
이 답변에서는 원형 참조가 있는 데이터 전용 객체(함수 없음 등)에 초점을 맞추고 maja 및 mathheadinclouds에 의해 언급된 아이디어를 개발합니다(그의 테스트 케이스를 사용하고 내 코드는 몇 배 짧습니다).
실제로 JSON.stringify를 적절한 리페이서와 함께 사용할 수 있습니다.소스 객체에 특정 객체에 대한 다중 참조가 포함되어 있거나 순환 참조가 포함되어 있는 경우 특수 경로 문자열(JSONPath와 유사)로 참조합니다.
// JSON.strigify replacer for objects with circ ref
function refReplacer() {
let m = new Map(), v = new Map(), init = null;
return function(field, value) {
let p = m.get(this) + (Array.isArray(this) ? `[${field}]` : '.' + field);
let isComplex = value === Object(value)
if (isComplex) m.set(value, p);
let pp = v.get(value)||'';
let path = p.replace(/undefined\.\.?/, '');
let val = pp ? `#REF:${pp[0] == '[' ? '$':'$.'}${pp}` : value;
!init ? (init=value) : (val===init ? val="#REF:$" : 0);
if(!pp && isComplex) v.set(value, path);
return val;
}
}
// ---------------
// TEST
// ---------------
// Generate obj with duplicate/circular references
let obj = {
L: {
L: { v: 'lorem' },
R: { v: 'ipsum' }
},
R: {
L: { v: 'dolor' },
R: {
L: { v: 'sit' },
R: { v: 'amet' }
}
}
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;
testObject = obj;
let json = JSON.stringify(testObject, refReplacer(), 4);
console.log("Test Object\n", testObject);
console.log("JSON with JSONpath references\n", json);JSONpath와 같은 참조를 사용하여 이러한 JSON 콘텐츠를 해석합니다.
// Parse JSON content with JSONpath references to object
function parseRefJSON(json) {
let objToPath = new Map();
let pathToObj = new Map();
let o = JSON.parse(json);
let traverse = (parent, field) => {
let obj = parent;
let path = '#REF:$';
if (field !== undefined) {
obj = parent[field];
path = objToPath.get(parent) + (Array.isArray(parent) ? `[${field}]` : `${field ? '.' + field : ''}`);
}
objToPath.set(obj, path);
pathToObj.set(path, obj);
let ref = pathToObj.get(obj);
if (ref) parent[field] = ref;
for (let f in obj) if (obj === Object(obj)) traverse(obj, f);
}
traverse(o);
return o;
}
// ---------------
// TEST 1
// ---------------
let json = `
{
"L": {
"L": {
"v": "lorem",
"uncle": {
"L": {
"v": "dolor",
"uncle": "#REF:$.L"
},
"R": {
"L": {
"v": "sit",
"uncle": "#REF:$.L.L.uncle.L"
},
"R": {
"v": "amet",
"uncle": "#REF:$.L.L.uncle.L"
},
"uncle": "#REF:$.L"
}
}
},
"R": {
"v": "ipsum",
"uncle": "#REF:$.L.L.uncle"
}
},
"R": "#REF:$.L.L.uncle"
}`;
let testObject = parseRefJSON(json);
console.log("Test Object\n", testObject);
// ---------------
// TEST 2
// ---------------
console.log('Tests from mathheadinclouds answer: ');
let recovered = testObject;
let obj = { // Original object
L: {
L: { v: 'lorem' },
R: { v: 'ipsum' }
},
R: {
L: { v: 'dolor' },
R: {
L: { v: 'sit' },
R: { v: 'amet' }
}
}
}
obj.R.L.uncle = obj.L;
obj.R.R.uncle = obj.L;
obj.R.R.L.uncle = obj.R.L;
obj.R.R.R.uncle = obj.R.L;
obj.L.L.uncle = obj.R;
obj.L.R.uncle = obj.R;
[
obj.L.L.v === recovered.L.L.v,
obj.L.R.v === recovered.L.R.v,
obj.R.L.v === recovered.R.L.v,
obj.R.R.L.v === recovered.R.R.L.v,
obj.R.R.R.v === recovered.R.R.R.v,
obj.R.L.uncle === obj.L,
obj.R.R.uncle === obj.L,
obj.R.R.L.uncle === obj.R.L,
obj.R.R.R.uncle === obj.R.L,
obj.L.L.uncle === obj.R,
obj.L.R.uncle === obj.R,
recovered.R.L.uncle === recovered.L,
recovered.R.R.uncle === recovered.L,
recovered.R.R.L.uncle === recovered.R.L,
recovered.R.R.R.uncle === recovered.R.L,
recovered.L.L.uncle === recovered.R,
recovered.L.R.uncle === recovered.R
].forEach(x => console.log('test pass: ' + x));결과 JSON 콘텐츠를 저장소로 로드/저장하려면 다음 코드를 사용합니다.
localStorage.myObject = JSON.stringify(testObject, refReplacer()); // Save
testObject = parseRefJSON(localStorage.myObject); // Load
Jackson-js를 사용할 것을 제안합니다.오브젝트의 구조를 유지하면서 데코레이터를 기반으로 오브젝트의 시리얼화 및 역직렬화를 처리하는 라이브러리입니다.
라이브러리는 순환 참조, 속성 별칭 지정 등과 같은 모든 함정을 처리합니다.
@JsonProperty() 및 @JsonClassType() 데코레이터를 사용하여 클래스를 간단히 설명하십시오.
다음을 사용하여 개체를 직렬화합니다.
const objectMapper = new ObjectMapper();
localstore.setItem(key, objectMapper.stringify<yourObjectType>(yourObject));
조금 더 자세한 설명은 이쪽에서 확인하시기 바랍니다.
Jackson-js 튜토리얼은 다음과 같습니다.
Jackson-js: 객체를 JSON으로 시리얼화/디시리얼라이즈하는 강력한 JavaScript 데코레이터(파트 1)
localStorage.setItem('user', JSON.stringify(user));
그런 다음 저장소에서 검색하여 개체로 다시 변환하려면:
var user = JSON.parse(localStorage.getItem('user'));
If we need to delete all entries of the store we can simply do:
localStorage.clear();
언급URL : https://stackoverflow.com/questions/2010892/how-to-store-objects-in-html5-localstorage
'programing' 카테고리의 다른 글
| 시스템에 설치되어 있는 TensorFlow 버전을 확인하려면 어떻게 해야 합니까? (0) | 2022.09.18 |
|---|---|
| 요청 및 응답을 모의하려면 어떻게 해야 합니까? (0) | 2022.09.18 |
| MySQL에서 필드가 null인지 빈지 확인하는 방법 (0) | 2022.09.18 |
| 문자열에 제로를 채우다 (0) | 2022.09.18 |
| IF 문의 & (AND) 및 | (OR) (0) | 2022.09.18 |