html5 web 存储——迹忆客-ag捕鱼王app官网

html5 web 存储,一个比cookie更好的本地存储方式。

什么是 html5 web 存储?

使用html5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

浏览器支持

internet explorer 8 , firefox, opera, chrome, 和 safari支持web 存储。

注意: internet explorer 7 及更早ie版本不支持web 存储。

localstorage 和 sessionstorage

客户端存储数据的两个对象为：

• localstorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionstorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localstorage 和sessionstorage:

if(typeof(storage)!=="undefined")
{
    // 是的! 支持 localstorage  sessionstorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

localstorage 对象

localstorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

localstorage.sitename="迹忆客";
document.getelementbyid("result").innerhtml="网站名："   localstorage.sitename;

实例解析：

• 使用 key="sitename" 和 value="迹忆客" 创建一个 localstorage 键/值对。
• 检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

以上实例也可以这么写：

// 存储
localstorage.sitename = "迹忆客";
// 查找
document.getelementbyid("result").innerhtml = localstorage.sitename;

移除 localstorage 中的 "sitename" :

localstorage.removeitem("sitename");

不管是 localstorage，还是 sessionstorage，可使用的api都相同，常用的有如下几个（以localstorage为例）：

• 保存数据：localstorage.setitem(key,value);
• 读取数据：localstorage.getitem(key);
• 删除单个数据：localstorage.removeitem(key);
• 删除所有数据：localstorage.clear();
• 得到某个索引的key：localstorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

下面的实例展示了用户点击按钮的次数。

代码中的字符串值转换为数字类型:

if (localstorage.clickcount)
{
    localstorage.clickcount=number(localstorage.clickcount) 1;
}
else
{
    localstorage.clickcount=1;
}
document.getelementbyid("result").innerhtml=" 你已经点击了按钮 "   localstorage.clickcount   " 次 ";

sessionstorage 对象

sessionstorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionstorage：

if (sessionstorage.clickcount)
{
    sessionstorage.clickcount=number(sessionstorage.clickcount) 1;
}
else
{
    sessionstorage.clickcount=1;
}
document.getelementbyid("result").innerhtml="在这个会话中你已经点击了该按钮 "   sessionstorage.clickcount   " 次 ";

web storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

• 可以输入网站名，网址，以网站名作为key存入localstorage；
• 根据网站名，查找网址；
• 列出当前已保存的所有网站；

以下代码用于保存与查找数据：

//保存数据  
function save(){  
    var siteurl = document.getelementbyid("siteurl").value;  
    var sitename = document.getelementbyid("sitename").value;  
    localstorage.setitem(sitename, siteurl);
    alert("添加成功");
}
//查找数据  
function find(){  
    var search_site = document.getelementbyid("search_site").value;  
    var sitename = localstorage.getitem(search_site);  
    var find_result = document.getelementbyid("find_result");  
    find_result.innerhtml = search_site   "的网址是："   sitename;  

完整实例演示如下：

     
    网站名(key)：  
      
    
  
    网 址(value)：  
      
    
  
      
    
  
    输入网站名：  
      
      
    

  

实现效果截图：

以上实例只是演示了简单的 localstorage 存储与查找，更多情况下我们存储的数据会更复杂。

接下来我们将使用 json.stringify 来存储对象数据，json.stringify 可以将对象转换为字符串。

var site = new object;
...
var str = json.stringify(site); // 将对象转换为字符串

之后我们使用 json.parse 方法将字符串转换为 json 对象：

var site = json.parse(str);

javascript 实现代码：

//保存数据  
function save(){  
    var site = new object;
    site.keyname = document.getelementbyid("keyname").value;
    site.sitename = document.getelementbyid("sitename").value;  
    site.siteurl = document.getelementbyid("siteurl").value;
    var str = json.stringify(site); // 将对象转换为字符串
    localstorage.setitem(site.keyname,str);  
    alert("保存成功");
}  
//查找数据  
function find(){  
    var search_site = document.getelementbyid("search_site").value;  
    var str = localstorage.getitem(search_site);  
    var find_result = document.getelementbyid("find_result");
    var site = json.parse(str);  
    find_result.innerhtml = search_site   "的网站名是："   site.sitename   "，网址是："   site.siteurl;  
}

完整示例如下

    别名(key):  
      
    
  
    网站名：  
      
    
  
    网 址：  
      
    
  
      
    
  
    输入别名(key)：  
      
      
    

  

实例中的 loadall 输出了所有存储的数据，你需要确保 localstorage 存储的数据都为 json 格式，否则 json.parse(str) 将会报错。

输出结果演示：