html5的localStorage的操作

在客户端存储数据(localStorage &sessionStorage )


Html5 提供了两种在客户端存储数据的新方法:
   localStorage - 没有时间限制的数据存储
   sessionStorage - 针对一个 session 的数据存储


       之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。


localStorage本地存储


      相对于上述本地存储方案,localStorage有自身的优点:容量大、易用、强大、原生支持;缺点是兼容性差些(chrome,  safari, firefox,IE 9,IE8都支持 localStorage,主要是IE8以下版本不支持)、安全性也差些(所以请勿使用localStorage保存敏感信息)。 localStorage保存的数据,一般情况下是永久保存的,也就是说只要采用localstorage保存信息,数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动,数据让然存在。知道用户或程序明确制定删除,数据的生命周期才会结束。在安全性方面,localstorage是域内安全的,即localstorage是基于域的。任何在该域内的所有页面,都可以访问localstorage数据。


localStorage四种方法:


localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value):将value存储到key字段
localStorage.removeItem(key):删除指定key本地存储的值
localStorage.length是localStorage的项目数


localStorage存储对象:

localStorage存储对象需要使用JSON.stringify()的方法将对象转换成字符串进行存储

localStorage存储的JSON字符串获取到了以后转换成对象即可

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LocalStorageHTML5中的一个新特性,它提供了一种在浏览器中存储数据的方法,数据存储在用户的本地计算机上,即使关闭浏览器,数据也不会丢失。在HTML5中,可以使用localStorage对象来访问和操作LocalStorage。 下面是保存数据到LocalStorage的步骤: 1.创建一个localStorage对象: ```javascript var storage = window.localStorage; ``` 2.使用setItem方法将数据保存到LocalStorage中: ```javascript storage.setItem("key", "value"); ``` 其中,key是要保存的数据的键,value是要保存的数据的值。 3.使用getItem方法从LocalStorage中获取保存的数据: ```javascript var value = storage.getItem("key"); ``` 其中,key是要获取的数据的键。 4.使用removeItem方法从LocalStorage中删除保存的数据: ```javascript storage.removeItem("key"); ``` 其中,key是要删除的数据的键。 完整的代码示例: ```javascript // 创建一个localStorage对象 var storage = window.localStorage; // 保存数据到LocalStorage中 storage.setItem("username", "Tom"); // 从LocalStorage中获取保存的数据 var username = storage.getItem("username"); console.log(username); // 输出:Tom // 从LocalStorage中删除保存的数据 storage.removeItem("username"); ``` 注意事项: 1. localStorage只能存储字符串类型的数据,如果要存储其他类型的数据,需要先将其转换为字符串类型。 2. localStorage存储容量有限,不同浏览器的容量也不同,一般为5-10MB左右。如果数据量较大,建议使用其他存储方式,如IndexedDB或Web SQL。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值