HTML5之Local Storage

HTML5 STORAGE SUPPORT

IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID
8.0+	3.5+	4.0+	4.0+	10.5+	2.0+	2.0+

 

Local Storage Detection:

## 方法一
function supports_local_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch(e){
    return false;
  }
}

## 方法二 
if(localStorage && localStorage.getItem('LOCALSTORAGEKEY')){

　　// localStorage is available and has the KEY 'LOCALSTORAGEKEY'

}

if (Modernizr.localstorage) {
  // localStorage is available!
} else {
  // no native support for local storage :(
  // try a fallback or another third-party solution
}

 

Local Storage Method:

key:

e.g: localStorage.key(1)

 

getItem:

e.g: localStorage.getItem('LOCALSTORAGEKEY')

 

setItem:

e.g: localStorage.setItem('LOCALSTORAGEKEY', 'LOCALSTORAGEVALUE')

 

removeItem:

e.g: localStorage.removeItem('LOCALSTORAGEKEY')

 

clear:

e.g: localStorage.clear()

 

 

Tracking changes:

if (window.addEventListener) {
  window.addEventListener("storage", handle_storage, false);
} else {
  window.attachEvent("onstorage", handle_storage);
}

function handle_storage(e) {
  if (!e) { e = window.event; }
}

STORAGEEVENT OBJECT:

PROPERTY	TYPE	DESCRIPTION
key	string	the named key that was added, removed, or modified
oldValue	any	the previous value (now overwritten), or null if a new item was added
newValue	any	the new value, or null if an item was removed
url*	string	the page which called a method that triggered this change
* Note: the url property was originally called uri. Some browsers shipped with that property before the specification changed. For maximum compatibility, you should check whether the url property exists, and if not, check for the uri property instead.

 

 

注意事项：

1、不推荐使用window.localStorage，可直接使用localStorage，window.localStorage在IE下有可能会抛出错误;

2、localStorage是以key=value值对形式存在的，value值一律为字符串，字面量对象可用JSON.stringify()转换成字符串后赋值给key;

3、localStorage.getItem('KEY')取出key对应的值后，需要JSON.parse()进行解析，否则其值只是一个看起来像字面量对象的字符串，同⓶；

4、如果通过localStorage.key(num)取值，num的起始索引是0，不推荐；

5、localStorage存储上限为5MB，超出会抛出“QUOTA_EXCEEDED_ERR”；