Web存储

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

---

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。Cookies从JavaScript出现之初就一直存在，所以在Web上存储数据并不是个新概念。不过Web存储是数据存储的一种更为强大的版本，可提 供更多的安全性、速度和易用性。在Web存储中还可以存储数量巨大的数据。具体的数量则取决于Web浏览器，但通常都在5MB到10MB之间，这对于一个 HTML应用程序而言已经足够大。另一个好处是此数据并不会在每次出现服务器请求时都被加载。惟一的限制是不能在浏览器之间分享Web存储, 如果您在Safari中存储了数据，那么该数据在Mozilla Firefox中是无法访问的。

Web存储有两种方式：localStorage和sessionStorage两种方式

localStorage对象：负责存储没有到期的数据。当Web页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量，存储的数据没有时间限制，第二天、第二周或下一年之后，数据依然可用。

例子：

<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (localStorage.clickcount)
    {
    localStorage.clickcount=Number(localStorage.clickcount)+1;
    }
  else
    {
    localStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>

该例子是记录鼠标点击的次数的，可以长期的存储，即使关闭浏览器也不会的计数产生影响。

sessionStorage对象：负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据。

例子：

<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (sessionStorage.clickcount)
    {
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
  else
    {
    sessionStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>

当用户关闭浏览器窗口后，数据会被删除。

HTML5使用local storage存储的数据是如何保存在本地的？（我使用的是chrome浏览器，chrom浏览器是用sqlite来保存本地数据的）

HTML5 的local storage 是通过浏览器在本地存储的数据。

基本使用方法如下：

1. <script type="text/javascript">  
2. localStorage.firstName = "Tom";  
3. alert(localStorage.firstName);  
4. </script>  

这样的话，就将数据保存到本地了，但是本地数据是以什么形式进行保存的呢，经过跟踪，发现在Chrome浏览器中，数据是以sqlite的数据库文件形式存储的。

在windows下，是保存在C:Documents and SettingsUser NameLocal SettingsApplication DataGoogleChromeUser DataDefaultLocal Storage 路径(其中User Name是指当前的用户名)下的；

在Mac下，是保存在/Users/User Name/Library/Application Support/Google/Chrome/Default/Local Storage路径(其中User Name是指当前的用户名)路径下的

虽然后缀名是.localstorege 但是实际上就是sqlite的数据库文件，可以用sqlite打开，并看到其中的数据。（可以使用firefox的SQLite Manager附加组件打开）