html 5中localstorage小结

来源：互联网发布：网络科学导论 ppt 编辑：程序博客网时间：2024/05/22 15:24

html 5中的localstorage的小结 demo,如下:

1)

<!DOCTYPE HTML><html><head><title>HTML5 Web Storage</title></head><body><h1>HTML5 Web Storage</h1><button type="button" onclick="write_local_storage()">Write Local Storage</button><button type="button" onclick="read_local_storage()">Read Local Storage</button><button type="button" onclick="write_session_storage()">Write Session Storage</button><button type="button" onclick="read_session_storage()">Read Session Storage</button><button type="button" onclick="clear_data()">Clear</button></body></html>

2) 然后检查浏览器知否支持html 5的localstorage,比如:

function check_support(){if(typeof(Storage) == "undefined")  {  alert("Sorry! No web storage support!");return false;}return true;}

3) 写到localstorage,

function write_local_storage(){if (check_support()){var persistObject = { 'Smith': 23, 'Kobi': 18, 'Alex': 32 };localStorage.setItem('persist_data', JSON.stringify(persistObject));}

4) 读localstorage

function read_local_storage(){if (check_support()){var storage = window.localStorage; var retrievedObject =  storage.getItem('persist_data');var length = storage.length;alert("Retrieving " + length + " item(s) from localstroage");alert(retrievedObject);}}

5 写session storage

function write_session_storage(){if (check_support()){var sessionObject = { 'keycode': 111, 'passpharse': 222, 'id': 888 };// Put the object into storagesessionStorage.setItem('session_data', JSON.stringify(sessionObject));}}

6 读session stage

function read_session_storage(){if (check_support()){// Retrieve the object from storagevar storage = window.sessionStorage; var retrievedObject =  storage.getItem('session_data');var length = storage.length;alert("Retrieving " + length + " item(s) from localstroage");alert(retrievedObject);}}

7 清除
function clear_data()
{

if (check_support())
{
localStorage.clear();
sessionStorage.clear();
}
}