前端本地存储的3种方法 |
您所在的位置：网站首页 › 前端常用的本地存储 › 前端本地存储的3种方法 |
| 前言
你们在项目开发中都是用什么方法来本地存储信息的呢？localStorage？ 还是sessionStorage？ 除了这两种你还知道哪些方法来存储呢？今天我该告诉你第三种。cookie，虽然很多人知道，但是用的的确很少。可能都忘了怎么用了。 CookieCookie的使用场景及须知 用于浏览器和server的通讯 可设置失效时间，默认是浏览器关闭后失效 存放数据大小为4K左右 每次都会携带在HTTP头中，如果使用Cookie保存过多数据会带来性能的问题 .需要程序员自己封装，原生的Cookie接口不友好Cookie用法 (设置) docment.cookie= "a=100; b=200" //一次只能添加一个, 多余的会被截取 (读取) document.cookie //"a=100" (修改) docment.cookie= "a=101“ (读取) document.cookie //"a=101"Cookie缺点： 语法过于简陋,只能追加,不易理解 localStoragelocalStorage的使用场景及须知 除非被清除，否则永久保存 存放数据大小一般为5MB 仅在客户端（即浏览器）中保存，不参与和服务器的通信 浏览器可以设置是否可以访问数据，如果设置不允许会访问失败 兼容IE8以上浏览器 6.只能存储字符串类型，需要转成字符串存储localStorage用法 (设置) localStorage.setItem("key","value") localStorage["name"]="bonly"; localStorage.key="value"; (读取) localStorage.getItem("key"); localStorage["name"]; localStorage.key; (修改) // 就是相当于给对应的key重新赋值，就会把原来的值覆盖掉 localStorage.setItem("key","value") (移除) localStorage.removeitem('name') delete localStorage["name"] delete localStorage.name (获取所有的key) for(var key in localStorage){ console.log(key); } (获取所有的值) localStorage.valueOf() (清除所有的值) localStorage.clear() (判断是否具有某个key，hasOwnProperty方法) // 如果存在的话返回true，不存在返回false localStorage.hasOwnProperty("name")localStorage使用技巧 先判断浏览器是否支持localStorage，通过if(!window.localStorage) return; 单词太长，不方便书写，可以利用 var storage=window.localStorage; 字符串和原始类型需要通过JSON.stringfy转字符串，通过JSON.parse转成对象 通过封装方法实现来回转化 sessionStoragesessionStorage 的使用场景及须知 仅在当前会话下有效，关闭tab页面或浏览器后被清除 2.存放数据大小一般为5MB 3.仅在客户端（即浏览器）中保存，不参与和服务器的通信localStorage用法(与localSorage一样) (设置) sessionStorage.setItem("key", "value") sessionStorage.key="value" sessionStorage["name"]="bonly" (读取) sessionStorage.getItem("key") sessionStorage["name"] sessionStorage.name (删除) sessionStorage.removeItem("name") (删除所有数据) sessionStorage.clear() 结束sessionStorage和localStorage都是html5后才出现的，所以用法以及场景都差不多，文章介绍到这里了，如有文章类容有不正确的地方，请在下方评论提出。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |