HTML5 web存储，比cookie更好的本地存储方式。

HTML5 Web存储是什么？

有了HTML5，用户的浏览数据可以本地存储。

早些时候，本地存储使用cookie。然而，网络存储需要更加安全和快速。这些数据不会保存在服务器上，但这些数据仅用于用户请求的网站数据。它还可以存储大量数据，而不影响网站的性能。

数据以键/值对的形式存在，网页的数据只能由网页访问和使用。

浏览器支持

Internet Explorer 8、Firefox、Opera、Chrome和Safari支持Web存储。

注意：互联网浏览器7和早期版本的IE不支持网络存储。

本地存储和会话存储

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

本地存储-没有时间限制的数据存储

会话存储-一个会话的数据存储

在使用网络存储之前，请检查浏览器是否支持本地存储和会话存储：

if(类型(存储)！=='未定义'){//是！支持本地存储会话存储对象！//一些代码.}else{//对不起！不支持Web存储。}

LocalStorage对象

本地存储对象存储的数据没有时间限制。第二天之后，第二周或者第二年，数据还是有的。

例子

LocalStorage.sitename='新手教程'；document . getelementbyid(' result ')。innerhtml='网站名称：' localStorage.sitename

实例解析：

使用键='sitename '和值='新手教程'创建本地存储键/值对。

检索键值为“sitename”的值，并将数据插入id为“result”的元素中。

上面的例子也可以写成如下：

//store localStorage.sitename='新手教程'；//查找document . getelementbyid(' result ')。innerhtml=local storage . sitename；

从本地存储中删除“姓氏”:

local storage . remove item(' last name ')；

localStorage和sessionStorage都可以使用同一个API，常用的API有以下几种(以localStorage为例):

保存数据：localStorage.setItem(键，值)；

读取数据：local storage . GetItem(key)；

删除单个数据：localStorage.removeItem(键)；

删除所有数据：local storage . clear()；

获取索引的键：local storage . key(index)；

提示：键/值对通常存储为字符串，您可以根据自己的需要转换格式。

以下示例显示了用户单击按钮的次数。

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

例子

if(local storage . click count){ local storage . click count=Number(local storage . click count)1；} else { LocalStorage . click count=1；} document . getelementbyid(' result ')。innerhtml='您已经单击了按钮' LocalStorage . click count ' times '；

努力

会话存储对象

SessionStorage方法存储一个会话的数据。当用户关闭浏览器窗口时，数据将被删除。

如何创建和访问会话存储：

例子

if(session storage . click count){ session storage . click count=Number(session storage . click count)1；} else { session storage . click count=1；} document . getelementbyid(' result ')。innerhtml='您已经单击了' sessionStorage.clickcount '按钮'本次会话次数'；

努力

网络存储开发一个简单的网站列表程序

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

可以输入网站名称和网站地址；并使用网站名称作为将其存储到本地存储的密钥；

根据网站名称，找到网站地址；

列出所有当前保存的网站；

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

Save()和find()方法

//保存数据函数save(){ varsiteurl=document。GetElementbyID('网站网址').价值；var sitename=document。GetElementByID(' sitename ').价值；localStorage.setItem(sitename，站点URL)；"警报("添加成功');}//查找数据function find(){ var search _ site=document。GetElementbyID(' search _ site ').价值；var sitename=LocalStorage。GetItem(search _ site)；var find _ result=document。GetElementbyID(' find _ result ')；'find _ result。' innerhtml=search _ site '的网址是：' sitename}

完整实例演示如下：

实例

divstyle='border: 2px虚线# ccc宽度width :320 px ' text-align :居中；labelfor='sitename '网站名（键):/labelinputype=' text ' id=' sitename ' name=' sitename ' class=' text '/br/label for=' site URL '网址（值):/labelinputype=' text ' id=' site URL ' name=' site URL '/br/input type=' button ' onclick=' save()' value='新增记录/hr/labelfor='search_phone '输入网站名：/labelinputype=' text ' id=' search _ site ' name=' search _ site '/input type=' button ' onclick=' find()' value='查找网站/pid='find_result'br//p/div

尝试一下

实现效果截图：

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

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

varsite=newObject.var str=JSON。stringify(site)；//将对象转换为字符串

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

var site=JSON。parse(str)；

Java脚本语言实现代码：

保存()与查找()方法

//保存数据函数save(){ var site=NewObject；网站。keyname=document。GetElementbyID(' keyname ').价值；网站。sitename=document。GetElementBYid(' sitename ').价值；网站。网站URL=文档。GetElementbyID('网站网址').价值；var str=JSON。stringify(site)；//将对象转换为字符串local STORAGE。SetItem(网站。keyname，str)；"警报("保存成功');}//查找数据function find(){ var search _ site=document。GetElementbyID(' search _ site ').价值；var str=LocalStorage。GetItem(search _ site)；var find _ result=document。GetElementbyID(' find _ result ')；var site=JSON。'解析(字符串)；'find _ result。' innerhtml=search _ site '的网站名是：' site.sitename '，网址是：' site.siteurl}

完整实例如下：

实例

divstyle='border: 2px虚线# ccc宽度width :320 px ' text-align :居中；labelfor='keyname '别名（键):/labelinputype=' text ' id=' keyname ' name=' keyname ' class=' text '/br/label for=' sitename '网站名：/labelinputype=' text ' id=' sitename ' name=' sitename ' class=' text '/br/label for=' site URL '网址：/labelinputype=' text ' id=' site URL ' name=' site URL '/br/input type=' button ' onclick=' save()' value='新增记录/hr/labelfor='search_phone '输入网站名：/labelinputype=' text ' id=' search _ site ' name=' search _ site '/input type=' button ' onclick=' find()' value='查找网站/pid='find_result'br//p/div