HTML5_html5 튜토리얼 기술에서 Localstorage 사용에 대한 튜토리얼

로컬스토리지란 무엇인가요

며칠 전, 이전 프로젝트에서 쿠키 작동이 매우 이상하다는 사실을 발견했습니다. 상담 후 URL에 매개변수가 전달되지 않도록 일부 정보를 캐시하고 싶었지만 쿠키가 발생할 수 있는 문제는 고려하지 않았습니다. 원인:

　① 쿠키 크기는 약 4k로 제한되어 비즈니스 데이터 저장에 적합하지 않습니다.
　② 쿠키는 매번 HTTP 트랜잭션과 함께 전송되므로 대역폭이 낭비됩니다

저희는 모바일 프로젝트를 진행하고 있는데, 여기서 정말 활용하기 적합한 기술은 로컬 스토리지입니다. 로컬 스토리지는 쿠키의 최적화라고 할 수 있습니다. 클라이언트에 데이터를 편리하게 저장하는 데 사용할 수 있으며, HTTP이지만 문제 없습니다.

④ localstorage는 크롤러가 크롤링할 수 없으므로 URL 매개 변수 전달을 완전히 대체하는 데 사용하지 마십시오

결함이 장점을 숨기지 않고 위의 문제를 피할 수 있으므로 로컬 스토리지를 어떻게 사용하는지, 어떻게 올바르게 사용하는지에 초점을 맞춰야 합니다.
로컬스토리지 활용

기본지식

로컬 스토리지 저장소 개체에는 두 가지 유형이 있습니다.

　① sessionStrage: 세션은 세션을 의미합니다. 여기서 세션은 사용자가 웹사이트를 탐색할 때 웹사이트에 입장한 후 웹사이트를 닫을 때까지의 기간을 의미합니다.

　② localStorage: 데이터가 무엇이든 클라이언트 하드웨어 장치에 데이터를 저장합니다. 즉, 다음에 컴퓨터를 켤 때 데이터가 그대로 유지됩니다.

둘의 차이점은 하나는 임시 보관용이고 다른 하나는 장기 보관용이라는 점입니다.

기본 사용법을 설명하는 간단한 코드는 다음과 같습니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <div id="msg"  스타일="여백: 10px 0; 테두리: 1px 단색 검은색; 패딩: 10px; 너비: 300px;   
2.   높이: 100px;">  
3. div>  
4. <입력 유형="텍스트"  id="text" />
5. <선택 id="type" >  
6.   <옵션 값="세션" >세션저장옵션>  
7.   <옵션 값="로컬" >로컬스토리지옵션>  
8. 선택>  
9. <버튼 클릭="저장( );">  
10.   保存数据버튼>  
11. <버튼 클릭="load( );">  
12.   读取数据버튼>  
13. <스크립트 유형="text/ javascript">  
14.   var msg = document.getElementById('msg'),   
15.            텍스트 = 문서.getElementById('text'),   
16.             유형 = 문서.getElementById('type');   
17.   
18.   함수 save() {   
19.     var str = text.value;   
20.     var t = type.value;   
21.     if (t == '세션') {   
22.       sessionStorage.setItem('msg', str);   
23.     } 그밖에 {   
24.       localStorage.setItem('msg', str);   
25.     }   
26.   }   
27.   
28.   함수 load() {   
29.     var t = type.value;   
30.     if (t == '세션') {   
31.       msg.innerHTML = sessionStorage.getItem('msg');   
32.     } 그밖에 {   
33.       msg.innerHTML = localStorage.getItem('msg');   
34.     }   
35.   }   
36. 스크립트>  

　真实场景

　　实际工作中对localstorage를 사용하는 데 사용하는 일이 없습니다.

　　① 缓存一般信息，如搜索页적 OUT发citycity，达到citycity ，不实时定位信息

　　② 缓存citycity列表数据，这个数据往往比较大

　　 ③ 每条缓存信息需要可追踪，比如服务器communicationcitycity数据更new，这个时候在最近一次访问的时候要自动设置过期

　　4 每条信息具有过期日期状态, 在过期外时间需要由服务器拉取数据

XML/HTML 코드复复内容到剪贴板

1. define([], function () {
3. var 저장소 = _.inherit({
4. //기본 속성
5. 속성: 함수() {
7. //프록시 객체, 기본값은 localstorage
8. this.sProxy = 창.localStorage
10. //60 * 60 * 24 * 30 * 1000 ms ==30일
11. this.defaultLifeTime = 2592000000
13. //로컬 캐시는 모든 localstorage 키 값과 만료 날짜 간의 매핑을 저장하는 데 사용됩니다.
14. this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';
//캐시 용량이 가득 차면 매번 삭제되는 캐시 개수
17. this.removeNum = 5;
18. },
20. 주장: 함수 () {
21. if (
this.sProxy
22. === null) { throw 'sProxy 속성을 재정의하지 않음'
23. }  
24. },
26. 초기화: 함수(선택) {
27. this.propertys()
28. this.assert()
29. },
31. /*
32. 로컬 저장소 추가
33. 데이터 형식에는 고유 키 값, json 문자열, 만료 날짜, 입금 날짜가 포함됩니다.
34. 기호는 동일한 요청에 다른 매개변수가 있을 때 새 데이터를 반환하는 데 사용되는 형식화된 요청 매개변수입니다. 예를 들어 목록이 베이징 시이고 상하이로 전환된 경우 태그가 다음과 같은 것으로 판단됩니다. 다르며 캐시된 데이터를 업데이트합니다. 태그는 서명
과 동일합니다.
35. 각 키 값에 대해 하나의 정보만 캐시됩니다.
36. */
37. 집합: 함수(키, 값, 시간 초과, 부호) {
38. var _d = 새 날짜()
39. //입금일
40. var indate = _d.getTime()
42. //최종 저장 데이터
43. var 엔티티 = null;
if (!timeout) {
_d.setTime(_d.getTime() this.defaultLifeTime)
47. 시간 초과 = _d.getTime()
}  
//
this.setKeyCache(key, timeout)
52. entity = this.buildStorageObj(value, indate, timeout, sign)
시도해보세요 {
this.sProxy.setItem(key, JSON.stringify(entity))
true를 반환합니다.
} 잡기 (e) {
//로컬 스토리지가 가득 차면 모두 삭제
if (
59. e.name == 'QuotaExceededError') {
// this.sProxy.clear()
61. if (!this.removeLastCache()) throw '이번에 저장된 데이터의 양이 너무 큽니다.'
62. this.set(key, value, timeout, sign)
63.                                                        
콘솔 && console.log(e)
}
65. false 반환
66. },
68. //만료된 캐시 삭제
69. RemoveOverdueCache: 함수 () {
70. var tmpObj = null, i, len;
var
72. 지금 = new Date().getTime()
//키-값 쌍 가져오기
var
74. cacheStr = this.sProxy.getItem(this.keyCache)
var
75. cacheMap = []
var
76. newMap = []
if (!cacheStr) {
복귀
}  
81. cacheMap = JSON.parse(cacheStr)
for (
83. i = 0, len = cacheMap.length; i < len; >
84. tmpObj = cacheMap[i] if (tmpObj.timeout
85. < 지금) { this.sProxy.removeItem(tmpObj.key)
86. } else {
87. newMap.push(tmpObj)
88.                                                        
89. }  
90. this.sProxy.setItem(this.keyCache, JSON.stringify(newMap))
92. },
94. 제거LastCache: 함수() {
95. var i, len
96. var num = this.removeNum || 5;
//키-값 쌍 가져오기
var
99. cacheStr = this.sProxy.getItem(this.keyCache)
var
100. cacheMap = []
var
101. delMap = []
//저장용량이 너무 크다는 표시
if (!cacheStr) 반환 false
캐시맵.정렬(함수 (a, b) {
a.timeout 반환 - b.timeout
})
//삭제된 데이터
111. delMap = cacheMap.splice(0, num); for (
i
112. = 0, len = delMap.length; i < len; > this.sProxy.removeItem(delMap[i].key)
113. }  
115. this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap))
116. true를 반환합니다.
117. },
119. setKeyCache: 함수(키, 시간 초과) {
120. if (!key || !timeout || timeout <
121. new Date().getTime( )) 반환 var i, len, tmpObj
123. //현재 캐시된 키 값 문자열 가져오기
124. var oldstr
125. = this.sProxy.getItem(this.keyCache) var oldMap
126. = [] //현재 키가 이미 존재하는지 여부
127. var 플래그
128. = false; var obj = {};   
129.       obj.key = key;   
130.       obj.timeout = 시간 초과;   
131.   
132.       if (oldstr) {   
133.         oldMap = JSON.parse(oldstr);   
134.         if (!_.isArray(oldMap)) oldMap = [];   
135.       }   
136.   
137.       for (i = 0, len = oldMap.length;  i < len;  i ) {   
138.         tmpObj = oldMap[i];   
139.         if (tmpObj.key == key) {   
140.           oldMap[i] = obj;   
141.           플래그 = 참;   
142.           휴식;   
143.         }   
144.       }   
145.       if (!flag) oldMap.push(obj);   
146.       //最后将新数组放到缓存中   
147.       this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));   
148.   
149.     },   
150.   
151.     buildStorageObj: 함수 (값, indate, timeout, sign) {   
152.       var obj = {   
153.         값: 값,   
154.         시간 초과: 시간 초과,   
155.         기호: 서명,   
156.         indate: indate   
157.       };   
158.       obj 반환;   
159.     },
161. get: 함수(키, 기호) {
162. var 결과, now = new Date().getTime()
163. 시도해보세요 {
164. 결과 = 이.sProxy.getItem(key)
165. if(!result)는 null을 반환합니다.
166. 결과 = JSON.parse(결과)
168. //데이터 만료
169. if (result.timeout < now) return null;
//서명확인이 필요합니다
if (부호) {
if (
173. sign === result.sign)
결과.값 반환
null 반환
} else {
결과.값 반환
                                                       
179. } 잡기 (e) {
180. 콘솔 && console.log(e)
181. }  
182. null 반환
183. },
185. //서명 받기
186. getSign: 함수(키) {
187. var 결과,
sign
188. = null; 시도해보세요 {
189. 결과
=
190. 이.sProxy.getItem(key) if (결과) {
191. 결과
=
192. JSON.parse(결과) sign
=
193. 결과 && result.sign                                                         } 잡기 (e) {
194. 콘솔 && console.log(e)
195. }  
196.       반환 기호;   
197.     },   
198.   
199.     제거: 기능(키) {   
200.       return this.sProxy.removeItem(key);   
201.     },   
202.   
203.     지우기: 함수 () {   
204.       this.sProxy.clear();   
205.     }   
206.   });   
207.   
208.   Storage.getInstance = 함수 () {   
209.     if (this.instance) {   
210.       return this.instance;   
211.     } 그밖에 {   
212.       return this.instance = new this();   
213.     }   
214.   };   
215.   
216.   반납 저장소;   
217.   
218. });  

这段代码包含了localstorage的基本操作,并且对以上问题做了处理,而真实的使用还要再抽象：

XML/HTML 코드复复内容到剪贴板

1. define(['AbstractStorage'], function(AbstractStorage) {
3. var Store = _.inherit({
4. //기본 속성
5. 속성: 함수() {
7. //각 객체에는 저장 키가 있어야 하며 반복할 수 없습니다.
8. this.key = null;
//데이터의 기본 수명 주기, S는 초, M은 분, D는 일
11. this.lifeTime = '30M';
12. //기본 반환 데이터
13. //
this.defaultData
14. = null
15. //프록시 객체, 로컬 저장소 객체
this.sProxy
17. = new AbstractStorage()
18. },
20. setOption: 함수(옵션) {
21. _.extend(this, 옵션)
22. },
24. 주장: 함수 () {
25. if (
this.key
26. === null) { '키 속성을 재정의하지 않음'을 발생시킵니다.
27. }  
28. if (
this.sProxy
29. === null) { throw 'sProxy 속성을 재정의하지 않음'
30. }  
31. },
33. 초기화: 함수(선택) {
34. this.propertys()
35. this.setOption(opts)
36. this.assert()
37. },   
38.   
39.     _getLifeTime: 함수 () {   
40.       var 시간 초과 = 0;   
41.       var str = this.lifeTime;   
42.       var 단위 = str.charAt(str.length - 1);   
43.       var num = str.substring(0, str.length - 1);   
44.       var 지도 = {   
45.         D: 86400,   
46.         H: 3600,   
47.         남: 60,   
48.         대: 1   
49.       };   
50.       if (typeof unit == 'string') {   
51.         단위단위 = unit.toUpperCase();   
52.       }   
53.       시간 초과 = 번호;   
54.       if (단위) 시간 초과 = 지도[단위];   
55.   
56.       //单位为毫秒   
57.       반환 숫자 * 시간 초과 * 1000 ;   
58.     },   
59.   
60.     //缓存数据   
61.     설정: 함수(값, 기호) {   
62.       //获取过期时间   
63.       var timeout = new Date();   
64.       timeout.setTime(timeout.getTime()   this._getLifeTime());   
65.       this.sProxy.set(this.key, value, timeout.getTime(), sign);   
66.     },   
67.   
68.     //设置单个属性   
69.     setAttr: 함수(이름, 값, 기호) {   
70.       var key, obj;   
71.       if (_.isObject(이름)) {   
72.         (키 입력 이름) {   
73.           if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);   
74.         }  
75.         반품;   
76.       }   
77.   
78.       if (!sign) sign = this.getSign();   
79.   
80.       //获取当前对象   
81.       obj = 이것.get(sign) || {};   
82.       (!obj) return인 경우;   
83.       obj[이름] = 값;   
84.       this.set(obj, sign);   
85.   
86.     },   
87.   
88.     getSign: 함수 () {   
89.       return this.sProxy.getSign(this.key);   
90.     },   
91.   
92.     제거: 함수 () {   
93.       this.sProxy.remove(this.key);   
94.     },   
95.   
96.     removeAttr: 함수 (attrName) {   
97.       var obj = this.get() || {};   
98.       if (obj[attrName]) {   
99.         obj[attrName] 삭제;   
100.       }   
101.       this.set(obj);   
102.     },   
103.   
104.     get: 함수(부호) {   
105.       var 결과 = [], isEmpty = true, a;   
106.       var obj = this.sProxy.get(this.key, sign);   
107.       var 유형 = 유형 obj;   
108.       var o = { 'string': true, 'number': true, 'boolean': true };   
109.       if (o[type]) return obj;   
110.   
111.       if (_.isArray(obj)) {   
112.         for (var i = 0, len = obj.length;  i < len;  i ) {   
113.           결과[i] = obj[i];   
114.         }  
115.       } else if (_.isObject(obj)) {   
116.         결과 = obj;   
117.       }   
118.   
119.       (결과적으로) {   
120.         isEmpty = false;   
121.         휴식;   
122.       }   
123.       return !isEmpty ? 결과 : null;   
124.     },   
125.   
126.     getAttr: 함수(attrName, 태그) {   
127.       var obj = this.get(tag);   
128.       var attrVal = null;   
129.       if (obj) {   
130.         attrVal = obj[attrName];   
131.       }   
132.       attrVal 반환;   
133.     }   
134.   
135.   });   
136.   
137.   Store.getInstance = 함수 () {   
138.     if (this.instance) {   
139.       return this.instance;   
140.     } 그밖에 {   
141.       return this.instance = new this();   
142.     }   
143.   };   
144.   
145.   매장 반품;   
146. });  

　　我们真实使用时候是使用store这个类操事localstorage，代码结束简单测试：

　存储完成，以后도불会走请求，于是今天的代码基本结束，最后在android Hybrid中有一后退按钮，此按钮一旦按下会回到上一个页면, 这个时候里면적localstorage可能会读取失效!一个简单不靠谱的解决方案是在webapp中加入：

XML/HTML 코드复复内容到剪贴板

1. window.onunload = 함수 () { };//适合单页应用 ，不要问我为什么，我也不知道  

　结语

　　localstorage是移动开发必不可少的技术点，需要深入了解，具体业务代码后续会放到git上，有兴趣的朋友可以去了解