首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,088 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,358 阅读
3
nps内网穿透实现外网访问树莓派
32,425 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,132 阅读
5
Typecho-Joe-Theme主题帮助文档
24,619 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,305
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
1
篇与
HTML5 Web
的结果
2021-05-22
HTML5 Web 存储 优于 Cookie 的本地存储方式
{message type="info" content="Web 开发中经常会遇到网站需要做一些例如用户备忘录、文章修改自动保存等需求这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为 4k,存储太多的数据时可能会出现存储空间不足的问题于是就有了 Web 存储来解决这个问题,Web 存储更加的安全与快速。这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据,而不影响网站的性能"/}HTML5 Web 存储目前有两种存储对象:localStorage 和 sessionStorage客户端存储数据的两个对象为:localStorage – 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除sessionStorage – 用于临时保存同一窗口 (或标签页) 的数据,在关闭窗口或标签页之后将会删除这些数据这样两种存储对象的区别也就出来了:localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空也就是说 localStorage 对象存储的数据没有时间限制,第二天、第二周或下一年之后,数据依然可用,sessionStorage 对象当用户关闭浏览器窗口后,数据会被删除HTML5 Web 存储的局限性浏览器的存储大小不统一,并且在 IE8 以上的浏览器版本才支持 HTML5 Web 存储HTML5 Web 存储本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡HTML5 Web 存储的使用不管是 localStorage,还是 sessionStorage,可使用的 API 方法都相同,常用的有如下几个(以 localStorage 为例):保存数据:localStorage.setItem (key,value);读取数据:localStorage.getItem (key);删除单个数据:localStorage.removeItem (key);删除所有数据:localStorage.clear ();得到某个索引的 key:localStorage.key (index);需要使用 sessionStorage 的时候,只需要将 localStorage 替换成 sessionStorage 即可在使用的时候最好将数据转为 JSON 字符串然后存入贴个实例:// 监听textarea变化 $("textarea").change(function(){ // 变量名随意 var wikiContent = {'content' : $('#content').val()}; // 存储值:将对象转换为Json字符串。如果有多条数据的话,key 最好做一下区分 localStorage.setItem("wikiContent", JSON.stringify(wikiContent)); }); var wikiJsonStr = localStorage.getItem("wikiContent"); // 取值时:把获取到的Json字符串转换回对象 wikiLocalContent = JSON.parse(wikiJsonStr); // 获取对应的值 console.log(wikiLocalContent.content);
2021年05月22日
221 阅读
2 评论
0 点赞