Explanation
With the rapid development of the Internet, web-based applications more and more common, while also becoming more and more complex, in order to meet a variety of needs, it regularly in large amounts of data stored locally, HTML5 specification related solutions proposed Program. We can use localStorage, sessionStorage local storage. Others include WebSQL, IndexDB storage.
compatibility
Internet Explorer 8+, Firefox, Opera, Chrome, and Safari support Web store, do not support web storage before IE7 and IE7
characteristic
1, is provided, easy to read, refresh the page without loss of data
2, larger capacity, the sessionStorage about 5M, localStorage about 20M
. 3, can store the string, the object may be the JSON.stringify () stores coded
4, taken JSON. the stringify () encoded data, use the JSON.parse () parses
sessionStorage
1, sessionStorage - data used to temporarily hold the same window (or tab), and these data will be deleted after closing the window or tab.
2, close the browser page, data will be lost. Even reopen the page, the data will not be restored.
3, multiple windows can not be shared
localStorage
1, localStorage - data for long-term preservation of data for the entire site, saved time has not expired, until it is manually removed.
2, can be multi-window (page) share (the same browser can be shared).
3, even if the window is closed, the data is temporarily disappear when the page is opened again, the data is restored.
Related API
They all have the same method
1, setItem (key, value) set the stored content
2, getItem (key) to read the stored content
3, removeItem (key) to delete the content key stored in the key-value
4, clear () to clear all the stored content
5, key (index) to get the value of a key index
For examples
Demonstrated here is sessionStorage, localStorage, too
<body>
<input type="text" id="text">
<button id="btn1">存储数据</button>
<button id="btn2">获取数据</button>
<button id="btn3">删除数据</button>
<button id="btn4">获取某个key值</button>
</body>
<script>
var text = document.getElementById('text')
var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
var btn3 = document.getElementById('btn3')
var btn4 = document.getElementById('btn4')
//存储数据
var inp = ''
btn1.onclick = function(){
inp = text.value
//存储数据
sessionStorage.setItem('uname', inp)
}
//获取数据
btn2.onclick = function(){
//获取数据
var uname = sessionStorage.getItem('uname')
alert(uname)
}
//删除数据
btn3.onclick = function(){
//删除所有
//sessionStorage.clear()
sessionStorage.removeItem('uname')
}
//获取第 0 个索引的key值
btn4.onclick = function(){
var key = sessionStorage.key(0)
alert(key)
}special
Because they can only store strings, so as to be stored array, object, etc., required the JSON.stringify () is stored after the encoding, is also required value of the JSON.parse () parses the string to obtain the appropriate data.
//定义一个对象
var obj = {
name: '车神-黄杰',
age:23
}
//保存值
sessionStorage.setItem('info', JSON.stringify(obj))
//获取值
var info = JSON.parse(sessionStorage.getItem('info'))
//输出值
alert(info.name)note
Because of compatibility issues, so according to their own needs, to determine whether there are compatibility issues when used, give prompt and friendly.
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
} else {
// 抱歉! 不支持 web 存储。
}