1、简介
HTML5 提供了两种在客户端存储数据的新方法
localStorage - 没有时间限制 一次存储永久访问
sessionStorage - 针对一个 session ( 会话 ) 的数据存储。关闭当前窗口，存储的数据被删除
之前，这些都是由 cookie 完成的。为什么不用cookie了？
cookie 不适合大量数据的存储 (只有4k)
cookie 影响网站的性能
cookie 速度慢(因为它们由每个对服务器的请求来传递) 安全性也不高
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
H5Web存储 在不影响网站性能的情况下存储大量数据 (5M)
HTML5 使用 JavaScript 来存储和访问数据。数据以 键/值 对存在
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
--------------------------------------------------------------------------------------------------------------------
2、检查浏览器是否支持 localStorage 和sessionStorage
Internet Explorer 8+、 Firefox、 Opera、Chrome 和 Safari都支持Web 存储
<script>
if ( typeof ( Storage ) !== "undefined" ) {
alert ( "当前浏览器 支持 localStorage sessionStorage 对象!")
} else {
alert ( "不好意思 H5web存储比较高大上 哥们我还不支持" )
}
</script>
-----------------------------------------------------------------------------------------------------------------
3、localStorage
localStorage 一次存储永久访问,除非数据被清空。用户关闭当前窗口下次访问依旧能够获取数据
3.1、创建和访问 localStorage
<script>
localStorage.name = "Hungry" // name是随便写的一个键 Hungry是name对应的值
document.write ( localStorage.name ) // 通过name这个键取得name对应的值
// 可以用setItem("name", "Hungry") 和 getItem("name") 代替
</script>
3.2、练习-存储用户是第几次访问网站
<script>
if ( localStorage.pagecount ) {
// 键/值对通常以字符串存储，你可以按自己的需要转换该格式
localStorage.pagecount = Number ( localStorage.pagecount ) +1
} else {
localStorage.pagecount = 1
}
document.write ( "访问第 "+ localStorage.pagecount + " 次 关闭浏览器再次运行")
</script>
-------------------------------------------------------------------------------------------------------------------------------------
4、sessionStorage 方法
sessionStorage 当用户关闭浏览器窗口后，数据会被删除。刷新当前页面，数据不会被删除。
4.1、创建并访问一个 sessionStorage
<script>
// sessionStorage.name = "Hungry"
// document.write ( sessionStorage.name )
// 下面写法等价于上面
sessionStorage.setItem ( "name" , "Hungry" )
document.write ( sessionStorage.getItem ( "name" ) )
</script>
4.2、练习-用户在当前 session 中访问页面的次数进行计数
<script>
if ( sessionStorage.pagecount ) {
sessionStorage.pagecount = Number ( sessionStorage.pagecount ) +1
} else {
sessionStorage.pagecount = 1
}
document.write ( "访问第 "+ sessionStorage.pagecount + " 次 关闭窗口 数据被清空")
</script>
-------------------------------------------------------------------------------------------------------------------
5、Web存储常用API---5个
不管是 localStorage，还是 sessionStorage，可使用的API都相同
（1）保存数据：localStorage.setItem ( key , value )
（2）读取数据：localStorage.getItem ( key )
（3）删除单个数据：localStorage.removeItem ( key )
例：
if ( localStorage.pagecount ) {
localStorage.pagecount = Number ( localStorage.pagecount ) +1
//一共10关，让刷到底10关的时候，从第一关开始
if ( localStorage.pagecount > 10 ) {
localStorage.removeItem ( "pagecount" )
localStorage.pagecount = 1
}
} else {
localStorage.pagecount = 1
}
document.write ( "来到第 "+ localStorage.pagecount + " 关 刷新一次通过一关 共10关 通关后又来到第一关")
（4）删除所有数据：localStorage.clear( )
localStorage.name = "男神";
localStorage.englishName = "Hungry";
localStorage.clear( )
document.write ( localStorage.name + localStorage.englishName )
（5）得到某个索引的key：localStorage.key ( index )
localStorage.name = "男神"
localStorage.englishName = "Hungry"
document.write ( localStorage.key ( 3 ) )
网友评论