js页面存储数据

js存取cookie

1创建和存储 cookie

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
 
上面这个函数中的参数存有 cookie 的名称、值以及过期天数。
 
在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。

2读取

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}
 
上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。

localStorage 存储对象(持久)

localStorage.obj = ""字符串;
 
读取直接读取
 
需要用到
JSON.stringify()
和JSON.parse()转换
 
localstorage.setItem(name,value)

sessionStorage 不持久(页面关闭即消失)

监听localStorage值的改变 (注意需要是同源的两个不同的网页)

监听同一个页面改变

var orignalSetItem = localStorage.setItem;
    localStorage.setItem = function(key,newValue){
        var setItemEvent = new Event("setItemEvent");
        setItemEvent.key=key;
        setItemEvent.newValue = newValue;
       
        orignalSetItem.apply(this,arguments);
    }
========================================
 
window.addEventListener("setItemEvent", function(e) {
              
  console.log(e.key+"~~~"+e.newValue)
  
});
 ==================================
 var orignalSetItem = localStorage.setItem; 
localStorage.setItem = function(key,newValue)
{ var setItemEvent = new Event("setItemEvent"); 
setItemEvent.newValue = newValue; 
window.dispatchEvent(setItemEvent); 
orignalSetItem.apply(this,arguments);
 }
 window.addEventListener("setItemEvent", function (e) { alert(e.newValue); }); 
localStorage.setItem("nm","1234");
 
==============================================
新解
基本原理如下：
 
1  重新生成一个对象，包装localStorage原生方法：
 
var Storage = {
        addItem : function(k,v){
        　　localStorage.setItem(k,v);
        　　......
        },
        removeItem : function(k){
        　　localStorage.removeItem(k);
               .......
        },
        getItem :
            ...
      }
 
2 在能引起storage变更时间的操作接口中，手动触发StorageEvent事件
 
比如removeItem的实现中，你就需要初始化并触发StorageEvent事件：
 
var se = document.createEvent("StorageEvent");
se.initStorageEvent('storage', false, false, key, oldval, newval, url, storage);
window.dispatchEvent(se);
 
3 通过自封装的Storage对象操作，并在当前页监听：
 
window.addEventListener("storage",function(e){
     console.log(e);
},false);
 
Storage.addItem('test','小朋友爱吃糖');

监听不同页面

    window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });
 
============================
    localStorage.clear();
    localStorage.setItem('foo', 'bar');
 
 
==============================
window.addEventListener("storage",function onStorageChange(event) {
     console.log(event.key);    
});
 回调函数接受一个event对象作为参数。这个event对象的key属性，保存发生变化的键名。
 
除了key属性，event对象的属性还有三个：
 
oldValue：更新前的值。如果该键为新增加，则这个属性为null。
newValue：更新后的值。如果该键被删除，则这个属性为null。
url：原始触发storage事件的那个网页的网址。
 
event.storageArea属性：属性值为变动的sessionStorage对象或localStorage对象；