本地存储——Cookie与Web Storage
Cookie
cookie
是客户端用来存储数据的,它既可以在客户端设置也可以在服务器端设置。cookie
会跟随任意HTTP
请求一起发送
Web Storage
html5
标准中的Web Storage
包括了两种存储方式:sessionStorage
和localStorage
sessionStorage
用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage
仅仅是会话级别的存储
而localStorage
用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的
区别
Web Storage
和Cookie
相似都是客户端用来存储数据的,区别是它是为了更大容量存储设计的Cookie
的大小是受限的,最多只能存储4KB
的数据;并且每次你请求一个新的页面的时候,Cookie
都会被发送过去,这样无形中浪费了带宽;再有就是不安全,很容易被拦截者截取进行篡改Web Storage
拥有setItem
、getItem
、removeItem
、clear
等方法,不像cookie
需要自己封装setCookie
、getCookie
等方法
但是Cookie
也是不可以或缺的:Cookie
的作用是与服务器进行交互,作为HTTP
规范的一部分而存在 ,而Web Storage
仅仅是为了在本地存储数据而生
操作方法
-
setItem
sessionStorage.setItem("name","leoyaojy"); localStorage.setItem("website","luckyw.cn");
-
getItem
sessionStorage.getItem("name"); //leoyaojy localStorage.getItem("website"); //luckyw.cn
-
removeItem
sessionStorage.removeItem("name"); localStorage.removeItem("website");
-
clear
sessionStorage.clear(); localStorage.clear();
-
其他操作方法:
点操作
和[]
sessionStorage.name = "leoyaojy"; console.log(sessionStorage["name"]); localStorage["website"] = "luckyw.cn"; console.log(localStorage.website);
-
key()
和length
遍历数据for (var i=0, len = localStorage.length; i<len; i++){ var key = localStorage.key(i); var value = localStorage.getItem(key); console.log(key + "=" + value); }
luckyw
单文件组件下的vue,可以擦出怎样的火花
leftstick赞 64阅读 45.2k评论 18
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
乌柏木赞 150阅读 12.3k评论 10
正则表达式实例
寒青赞 56阅读 7.9k评论 11
JavaScript有用的代码片段和trick
jenemy赞 46阅读 6k评论 12
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
乌柏木赞 66阅读 6.2k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
libinfs赞 39阅读 6.3k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
乌柏木赞 44阅读 7.4k评论 6
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。