首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

html 五中localstorage小结

2013-02-19 
html 5中localstorage小结html 5中的localstorage的小结 demo,如下:1)!DOCTYPE HTMLhtmlheadtitle

html 5中localstorage小结
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();
}
}

热点排行